高效检测单页应用中的 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 实施。我有点担心使用突变观察器可能会进入无限循环。在同一行看到很多堆栈溢出问题。

有什么alternate/better方法吗？如何安全有效地检测 DOM update/change？或者是变异观察者最好的选择

Answer 1

MutationObserver is probably your best bet. Before MutationObserver, there were 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
});

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

Efficiently detect DOM change in single page application

javascript

dom-events