监听浏览器重排事件

Question

我正在尝试收听浏览器 reflow-events 以了解代码的哪些部分是最昂贵的部分。当某些东西必须（重新）绘制到屏幕上时，例如当将新元素添加到 DOM 时，就会发生重排。

有没有办法在 JavaScript 中/使用 JavaScript 来监听这些事件，以便进一步分析？

Answer 1

我认为解决方案是使用 DOM MutationObserver 类。 正如文档指出的那样：

它旨在替代 DOM3 事件规范中定义的突变事件。 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();