javascript - 影响 JavaScript 等效项的元素

Question

我想要一个 JavaScript 解决方案来测量一段时间内受影响的 DOM 节点的数量。我正在寻找的解决方案与 Chrome 工具栏中的 Elementsaffected 属性非常相似。
因为我想在应用程序投入生产时测量此客户端，所以我无法使用 Chrome 工具栏。
我已经尝试过 document.getElementsByTagName("*").length 但这只给了我当前的金额。
因此，如果我要删除 2 个元素并添加 3 个元素，它会说 1 个节点受到影响，而实际上有 5 个节点。
有什么想法/窍门吗？

Answer 1

目前在 Firefox 中作为 MutationObserver 实现，在 Chrome 中作为 vendor 前缀的 WebKitMutationObserver 实现:

MutationObserver = window.MutationObserver || window.WebKitMutationObserver;

var observer = new MutationObserver(function(mutations, observer) {
    // fired when a mutation occurs
    console.log(mutations, observer);
    // ...
});

// define what element should be observed by the observer
// and what types of mutations trigger the callback
observer.observe(document, {
  subtree: true,
  attributes: true
  //...
});

此示例监听 document 及其整个子树上的 DOM 更改，并且它将在元素属性的更改以及结构更改时触发。规范草案包含有效 mutation properties 的完整列表。 .