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

Question

我正在构建一个 JS 库，其中一个用例要求我在 DOM 更改时触发一个事件，特别是如果它是一个单页应用程序，例如:github search bar
经过一番研究，我遇到了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 events ，但这些现在已弃用且不推荐使用。
另一个(可能很差)的选择是使用 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
});