听取浏览器回流事件
我正在尝试收听浏览器reflow-events以了解代码的哪些部分是最昂贵的。 当必须(重新)绘制到屏幕上时,例如当将新元素添加到DOM时,会发生回流。
有没有办法在例如/用Javascript中监听这些事件,以便进一步分析?
我认为解决方案是使用DOM MutationObserver类。 正如文件所指出的那样:
它被设计为DOM3 Events规范中定义的Mutation Events的替代品。 Api Docs
网站上的示例非常自我解释
// select the target node var target = document.querySelector('#some-id'); // create an observer instance var observer = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { console.log(mutation.type); }); }); // configuration of the observer: var config = { attributes: true, childList: true, characterData: true }; // pass in the target node, as well as the observer options observer.observe(target, config); // later, you can stop observing observer.disconnect();