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

Question

我正在构建一个 JS 库，其中一个用例要求我触发 DOM 更改事件，特别是如果它是单页应用程序，例如： github 搜索栏 经过一些研究后我发现MutationObserver：

// Dom change event listner
MutationObserver = 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 事件，但现在已弃用且不推荐使用这些事件。

另一个（可以说是糟糕的）选择是使用 asetTimeout并定期检查 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
});