有效地检测单页应用程序中的DOM更改
有效地检测单页应用程序中的DOM更改
提问于 2020-10-08 07:51:58
我正在构建一个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更新/更改？或者是变异观察者的最佳选择
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-10-08 08:17:58
MutationObserver可能是你最好的选择。在MutationObserver之前，有突变事件，但是现在已经不推荐使用了，不推荐使用。
另一个(可以说是糟糕的)选项是使用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
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64258075
复制相关文章
相似问题
腾讯云开发者
