以下代码利用 DOM Mutation EventDOMNodeInserted
来检测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>
尽管包装成功,但仍有错误表明未找到节点。这个问题的答案解释说,这是因为当 jQuery 被加载时,它div
在 body 中添加了一个元素来做一些测试,但它未能删除该div
元素,因为该元素已被包装到包装器中,因此它不是子元素身体的元素了。
上面的实验告诉我们DOMNodeInserted
event 比 jQuery 的测试更快,因为 jQuery 的测试元素 ( 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>
此代码没有产生任何错误。这意味着 jQuery 比 DOM Mutation Observers 更快,因此它能够div
在该元素被包装到包装器之前删除其测试元素 ( )。
从以上两个实验中,我们发现在执行速度方面:
- DOM 突变事件 > jQuery 的测试
- jQuery 的测试 > DOM 变异观察者
这个结果能否恰当地证明 DOM Mutation Observers 比 DOM Mutation Events 慢?