听浏览器的回流事件

Question

我正在尝试监听浏览器reflow-events，以了解代码的哪些部分是最耗费资源的。当需要（重新）绘制到屏幕上时，例如在DOM中添加新元素时，会发生回流。

是否有一种方法可以监听这些事件，例如使用Javascript进行进一步分析？

- Tohveli

---

这类似于DOM突变事件，已被弃用并且从未得到广泛支持。我认为您应该使用浏览器的分析功能。 - Barmar

看一下Chrome的开发者工具：http://addyosmani.com/blog/performance-optimisation-with-timeline-profiles/ - superUntitled

但是有没有一种内部代码的方法来实现它呢？ - Tohveli

我也在研究这个，我想要钩入事件来测试重排后元素是否可见... - Hayko Koryun

Answer 1

我认为解决方案是使用DOM MutationObserver类。正如文档所指出的那样： 它被设计为DOM3事件规范中定义的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();

- ABeltramo

---

MutationObservers 只监听 DOM 树的更改。DOM 树的更改不一定会触发重排，而这些更改只是可能导致重排的子集。例如，视口大小调整可以导致布局重新计算，但并不修改 DOM 树。 - Azmisov