高效檢測單頁應用中的 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 events ，但現在已棄用且不推薦使用。

另一個（可以說是糟糕的）選項是使用setTimeout並定期檢查 DOM 是否有更改。 但這需要你寫一個 function 來獲取你要檢查的節點，並將當前值與舊值進行比較。 這不會那么有效，因為即使沒有任何更改，您也會每 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
});