高效检测单页应用中的 DOM 变化

Question

我正在构建一个 JS 库，其中一个用例要求我在 DOM 更改时触发一个事件，特别是如果它是一个单页应用程序，例如： github 搜索栏 经过一些研究我发现MutationObserver：// Dom change event listnerMutationObserver = window.MutationObserver || window.WebKitMutationObserver;var observer = new MutationObserver(function(mutations, observer) {    // fired when a mutation occurs    attachListners();    // ...});observer.observe(documentAlias, {  subtree: true,  childList: true  //...});问题：我正在构建的库旨在插入任何网站，因此我无法控制 html 实现。我有点担心使用突变观察器可能会进入无限循环。在同一行看到很多堆栈溢出问题。有没有替代/更好的方法？如何安全有效地检测 DOM 更新/更改？或者是变异观察者最好的选择

Answer 1

MutationObserver可能是您最好的选择。之前MutationObserver，有Mutation 事件，但现在已弃用且不推荐使用。

另一个（可以说是糟糕的）选择是使用setTimeout并定期检查 DOM 的变化。但这将需要您编写一个函数来获取要检查的节点并将当前值与旧值进行比较。这不会那么有效，因为即使没有任何更改，您也会每 X 毫秒检查一次节点。

您应该能够以不会发生无限循环的方式编写代码。如果您遇到无限循环，则应将该代码添加到上面的问题中。

就性能而言，因为MutationObserver会给你旧值和新值，你可以比较这些值而不是遍历整个 DOM。例如，像这样：

let observer = new MutationObserver((mutations) => {

  mutations.forEach((mutation) => {

    let oldValue = mutation.oldValue;

    let newValue = mutation.target.textContent;

    if (oldValue !== newValue) {

        // do something

    }

  });

});

observer.observe(document.body, {

  characterDataOldValue: true, 

  subtree: true, 

  childList: true, 

  characterData: true

});