这个答案主要适用于大而复杂的页面。

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

0. 始终使用devtools 分析器，并尝试使您的观察者回调消耗少于页面加载期间消耗的总 CPU 时间的 1%。

1. 避免通过访问 offsetTop 和类似属性触发强制同步布局

2. 避免使用像 jQuery 这样复杂的 DOM 框架/库，更喜欢原生 DOM 的东西

3. 观察属性时，使用中的attributeFilter: ['attr1', 'attr2']选项.observe()。

4. 只要有可能，非递归地观察直接父母 ( subtree: false)。
   例如，通过document递归观察来等待父元素，成功时断开观察者，在这个容器元素上附加一个新的非递归是有意义的。

5. 当只等待一个具有id属性的元素时，使用非常快的方法getElementById 而不是枚举mutations数组（它可能有数千个条目）：example。

6. 例如，如果所需元素在页面上相对稀少（例如iframe或object），请使用getElementsByTagName和返回的实时 HTMLCollectiongetElementsByClassName并重新检查它们，而不是枚举mutations超过 100 个元素的 。

7. 避免使用querySelector，尤其是极慢的querySelectorAll。

8. 如果querySelectorAll在 MutationObserver 回调中绝对不可避免，则首先执行querySelector检查，如果成功则继续querySelectorAll。平均而言，这样的组合会快很多。

9. 如果针对 2018 年之前的 Chrome/ium，请不要使用需要回调的内置数组方法，例如 forEach、filter 等，因为在 Chrome 的 V8 中，与经典for (var i=0 ....)循环（10-100倍慢），并且 MutationObserver 回调可能会在复杂的现代页面上报告数千个节点。

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

8. 如果针对 2019 之前的浏览器，请不要使用像MutationObserver 回调中那样的慢速 ES2015 循环，for (let v of something)除非您进行编译以使结果代码与经典for循环一样快地运行。

9. 如果目标是改变页面的外观，并且您有一种可靠且快速的方法来告诉正在添加的元素在页面的可见部分之外，请断开观察者并通过以下方式安排整个页面的重新检查和重新处理setTimeout(fn, 0)：它将在解析/布局活动的初始爆发已完成，引擎可以“呼吸”，这甚至可能需要一秒钟。然后你可以使用 requestAnimationFrame 不显眼地处理页面，例如。

10. 如果处理很复杂和/或需要很多时间，则可能会导致绘制帧很长、无响应/卡顿，因此在这种情况下，您可以使用去抖动或类似技术，例如在外部数组中累积突变并通过以下方式安排运行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});