MutationObserver在整个DOM中检测节点的性能

Question 1

我对MutationObserver用于检测某个HTML元素是否添加到HTML页面中的任何位置感兴趣。例如，我要说的是，我想检测是否<li>在DOM中的任何位置添加了。

MutationObserver到目前为止，我所看到的所有示例仅检测是否将节点添加到特定容器中。例如：

一些HTML

<body>

  ...

  <ul id='my-list'></ul>

  ...

</body>

MutationObserver 定义

var container = document.querySelector('ul#my-list');

var observer = new MutationObserver(function(mutations){
  // Do something here
});

observer.observe(container, {
  childList: true,
  attributes: true,
  characterData: true,
  subtree: true,
  attributeOldValue: true,
  characterDataOldValue: true
});

因此，在此示例中，MutationObserver安装程序将监视非常特定的容器（ul#my-list），以查看是否将任何<li>附加到该容器。

如果我不想那么具体，并<li>在整个HTML正文中关注，是否会出现这样的问题：

var container = document.querySelector('body');

我知道它可以在我为自己设置的基本示例中起作用...但是不建议这样做吗？这会导致性能下降吗？如果是这样，我将如何检测和衡量该性能问题？

我认为也许有一个原因，所有MutationObserver示例都针对其目标容器如此具体...但是我不确定。

Question 2

此答案主要适用于大型页面和复杂页面。

如果附接之前的页面加载/渲染，一个未优化的MutationObserver回调可以在几秒钟添加到页面加载时间（例如，5秒至7秒），如果页是大而复杂的（1，2）。回调是作为微任务执行的，该微任务阻止了DOM的进一步处理，并且可以在复杂的页面上每秒触发数百次或数千次。大多数示例和现有库都没有考虑到这种情况，而是提供了美观，易于使用但可能会变慢的JS代码。

始终使用devtools分析器，并尝试使您的观察者回调所消耗的时间少于页面加载期间所消耗的总CPU时间的1％。
通过访问offsetTop和类似属性避免触发强制同步布局
避免使用复杂的DOM框架/库（如jQuery），更喜欢使用本机DOM。
观察属性时，请使用 attributeFilter: ['attr1', 'attr2']选项.observe()。
只要有可能，请非递归地观察直系父母（subtree: false）。
例如，通过document递归地观察等待父元素，在成功时断开观察者的连接，在此容器元素上附加一个新的非递归对象是有意义的。
当仅等待具有id属性的一个元素时，请使用快速的速度，getElementById 而不是枚举mutations数组（它可能有成千上万个条目）：example。
如果所需元素在页面上相对较少（例如iframe或object），请使用getElementsByTagName和返回的实时HTMLCollectiongetElementsByClassName并重新检查所有元素mutations元素，而不是枚举如果它具有100个以上的元素。
避免使用 querySelector，尤其是极慢的速度querySelectorAll。
如果querySelectorAll在MutationObserver回调中绝对无法避免，请先执行querySelector检查，如果成功，则继续进行querySelectorAll。平均而言，这样的组合会快很多。
如果定位到2018年之前的Chrome / ium，请不要使用需要回调的内置Array方法（如forEach，filter等），因为在Chrome的V8中，与经典for (var i=0 ....)循环相比，调用这些函数的代价一直很高（10-100时间慢一些），并且MutationObserver回调可能会报告复杂的现代页面上的数千个节点。

由lodash或类似的快速库支持的替代功能枚举即使在较旧的浏览器中也可以。
截至2018年，Chrome / ium内联了标准数组内置方法。

如果定位前2019的浏览器，不要使用慢速ES2015循环一样for (let v of something)，除非你transpile所以MutationObserver回调中，所得的代码的运行速度是经典的for循环。
如果目标是改变页面的外观，并且您有一种可靠，快速的方法来告知所添加的元素不在页面的可见部分之外，请断开观察者的连接，并通过以下方式安排整个页面的重新检查和重新处理： setTimeout(fn, 0)以下方式：解析/布局活动的初始爆发完成，引擎可以“呼吸”，甚至可能需要一秒钟。然后，您可以使用例如requestAnimationFrame显着地处理页面。

使用去抖动或类似技术，例如，在外部数组中累积突变并通过setTimeout / requestIdleCallback / requestAnimationFrame安排运行：

const queue = [];
const mo = new MutationObserver(mutations => {
  if (!queue.length) requestAnimationFrame(process);
  queue.push(mutations);
});
function process() {
  for (const mutations of queue) {
    // ..........
  }
  queue.length = 0;
}

回到问题：

看一个非常确定的容器ul#my-list，看是否有<li>有附加的。

由于li是直接子节点，我们在寻找添加的节点，因此唯一需要的选项是childList: true（请参阅上面的建议2）。

new MutationObserver(function(mutations, observer) {
    // Do something here

    // Stop observing if needed:
    observer.disconnect();
}).observe(document.querySelector('ul#my-list'), {childList: true});