Question

是否有可能在DOM节点上观察到尚不存在的突变？

示例：

我的应用会在某个时刻创建一个div：<div id="message" data-message-content="foo" data-message-type="bar" />。

我想要关注这个创作＆amp;改变这个div。

var mutationObserver = new MutationObserver(function(mutations){
  // Some code to handle the mutation.
});

mutationObserver.observe(
    document.querySelector('#message'),
        { 
            attributes: true, 
            subtree: true, 
            childList: true, 
            characterData: false 
        }
    );
);

现在这会返回错误，因为#message为空（尚未创建div）。

Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'.

一个明显的解决方案是观察body并检查是否有任何突变是div#Message的创建，但这似乎是一个坏主意/或可能对性能不利。

Answer 1

只能观察现有节点。

但不要担心，因为与枚举所有突变添加的节点相比，getElementById的速度非常快，等待元素出现将不会产生任何负担，正如您将在Devtools中看到的那样 - ＆gt; Profiler面板。

function waitForAddedNode(params) {
    new MutationObserver(function(mutations) {
        var el = document.getElementById(params.id);
        if (el) {
            this.disconnect();
            params.done(el);
        }
    }).observe(params.parent || document, {
        subtree: !!params.recursive,
        childList: true,
    });
}

用法：

waitForAddedNode({
    id: 'message',
    parent: document.querySelector('.container'),
    recursive: false,
    done: function(el) {
        console.log(el);
    }
});

始终使用devtools探查器并尝试使观察者回调消耗不到1％的CPU时间。

尽可能观察未来节点的直接父母（subtree: false）
在MutationObserver回调中使用getElementById，getElementsByTagName和getElementsByClassName，避免使用querySelector，特别是极慢的querySelectorAll。
如果querySelectorAll在MutationObserver回调中是绝对不可避免的，首先执行querySelector检查，平均来说这样的组合会快得多。
不要使用像forEach，filter等那样需要在MutationObserver回调中进行回调的数组方法，因为与经典的for (var i=0 ....)循环相比，Javascript函数调用是一项昂贵的操作，并且MutationObserver回调可能每次触发100次第二，在复杂的现代页面上，每批突变中有数十，数百或数千addedNodes。
不要在MutationObserver回调中使用the slow ES2015 loops之类的for (v of something)，除非你进行反编译，结果代码的运行速度与经典的for循环一样快。

观察目标节点上尚不存在的突变

1 个答案: