DOM Mutation Observers比DOM Mutation事件慢吗？

Question

DOM Mutation Observers比DOM Mutation事件慢吗？

Ian*_* Y. 9 javascript performance events observers mutation-events

以下代码利用DOM Mutation Event DOMNodeInserted来检测body元素的存在并将其innerHTML包装到包装器中.

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>
        function DOMmanipulation() {
            if (document.body) {
                document.removeEventListener('DOMNodeInserted', DOMmanipulation);
                // DOM manipulation start
                document.body.innerHTML = '<div class="wrapper">' + document.body.innerHTML + '</div>';
                // DOM manipulation end
            }
        }
        document.addEventListener('DOMNodeInserted', DOMmanipulation);
    </script>
</head>
<body>
    <p>Lorem ipsum dolor sit amet.</p>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

尽管包装成功,但是有一个错误表明找不到节点.这个问题的答案解释说,这是因为当jQuery被加载时,它div在主体中添加了一个元素来进行一些测试,但它无法删除该div元素,因为该元素已被包装到包装器中,因此它不是一个孩子身体的元素了.

上面的实验告诉我们DOMNodeInserted事件比jQuery的测试更快,因为jQuery的test element(div)在被jQuery删除之前就被包装了.

现在,下面的代码可以实现相同的操作,并且它使用新引入的DOM Mutation Observers.截至此时(2012-07-11),它仅适用于Chrome 18及更高版本.

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>
        var observer = new WebKitMutationObserver(function() {  
            if (document.body) {
                observer.disconnect();
                // DOM manipulation start
                document.body.innerHTML = '<div class="wrapper">' + document.body.innerHTML + '</div>';
                // DOM manipulation end
            }
        });
        observer.observe(document, { subtree: true, childList: true });
    </script>
</head>
<body>
    <p>Lorem ipsum dolor sit amet.</p>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

此代码不会产生任何错误.这意味着jQuery比DOM Mutation Observers更快,因此它可以div在将该元素包装到包装器之前删除其test元素().

从以上两个实验中,我们发现在执行速度方面:

DOM Mutation Events> jQuery的测试
jQuery的测试> DOM Mutation Observers

这个结果能否恰当地证明DOM Mutation Observers比DOM Mutation Events慢？

Answer 1

Ash*_*kes 26

DOM Mutation Observers并不比DOM Mutation Events更快.相反,它们旨在更高效,更安全.

差异的基本要点是DOM Mutation Events会在发生变化时触发.因此,此代码将创建一个回调循环,最终将导致浏览器崩溃.

document.addEventListener('DOMNodeInserted', function() {
    var newEl = document.createElement('div');
    document.body.appendChild(newEl);
});

Run Code Online (Sandbox Code Playgroud)

以这种方式调用它们的事实往往也会对浏览器产生重大影响,因为它会强制浏览器之间的中断重新计算样式,重排和重新绘制循环,或者更糟糕的是迫使浏览器重新计算样式,重新回流并重新绘制每个样式打回来.由于其他代码可能正在执行而对DOM进行进一步更改的事实进一步加剧了这个问题,这将继续被回调中断.

更重要的是,因为事件以与普通DOM事件相同的方式传播,您将开始听到您可能不关心或未在代码中考虑的元素的更改.因此,DOM Mutation事件的整个机制很快就会变得很麻烦.

DOM突变观察者通过观察DOM的变化并向您提供从变更开始时发生的所有变化的报告来抵消这些问题.这是一个更好的情况,因为它允许浏览器在有意义的时间通知您,例如当文档空闲且所有其他可以进行进一步更改的JavaScript已完成执行时,或者在浏览器重新启动之前recalc/repaint循环,因此它可以应用您所做的任何更改,而不必在之后不久重复循环.

它还使您更容易管理,因为您可以扫描所有更改的元素以找到您要查找的内容,而不是为您不关心的内容编写大量案例处理代码,就像突变事件.更重要的是它只会调用一次,所以你不必担心任何进一步的变化会影响元素,即它们不再处于改变状态,它们已经改变了.

因此,在回答您的问题时,DOM Mutation Observers更慢,因为他们在通知您jQuery更改之前等待jQuery完成对DOM的操作.由于上面解释的原因和您的示例,证明它是更安全更有效的解决方案(您不再导致错误),并且您并不真正关心jQuery为DOM添加了一些内容,因为它很快就会删除它.使用Observers,您将收到一份报告,详细说明要添加和删除的jQuery元素.

这仍然有点麻烦,因为你必须通过匹配元素与发生的所有变化来弄清楚实际发生了什么.实际情况是,只要你担心什么都没发生(添加和删除相同的元素),所以在DOM的结构中没有任何实际改变.为了帮助解决这个问题,有一个名为MutationSummary的小库:

http://code.google.com/p/mutation-summary/

这会计算更改的净效果,并仅调用您的回调传递这些更改.因此,在您的情况下,根本不会调用您的回调,因为更改的净效果为零.

例如,对于以下内容,您只能进行一次更改.体型改为左:1000px.即使我以1000增量更改它.变化的净效应仅是其初始值与最终值之间的差异.

function moveBody() {
    for (var i = 0; i < 1000; i++) document.body.style.left = i + 'px';
}
moveBody();

Run Code Online (Sandbox Code Playgroud)

Answer 2

小智 6

简单的答案是变异观察者是异步的.只要发动机感觉它,发生变化后的某个时间以及在发生了很多变化之后的某些情况下,它们就会被发送.这可能是在DOM突变事件监听器通知您之后很长时间,但同时引擎可以自由地完成其工作,而不必为每个捣乱的DOM更改不断创建和冒泡事件.

归档时间：	13 年，10 月前
查看次数：	4551 次
最近记录：	12 年，8 月前