8
次のコードでは、DOM突然変異イベントDOMNodeInsertedを使用してbody要素の存在を検出し、そのinnerHTMLをラッパーにラップします。DOM突然変異観察者はDOM突然変異イベントよりも遅いですか？
<!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>
そして、ラッピングが成功したにもかかわらず、ノードが見つからないというエラーが表示されます。 This answerは、jQueryがロードされたときに本体にdiv要素を追加していくつかのテストを実行したが、div要素を削除できなかったため、その要素がラッパーにラップされていないため子どもの身体の要素。
上記の実験では、jQueryのテスト要素（div）がjQueryで削除される前にラップされているため、DOMNodeInsertedイベントはjQueryのテストより高速であることがわかりました。
今、次のコードは、同じ操作を実現することができ、それが新たに導入されたDOM変更オブザーバーを使用しています。今回（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変異突然変異体がDOM突然変異イベントよりも遅いことを適切に証明できますか？
ありがとう@AshHeskesと素敵な説明！最後に私はその実行の原則を理解しています。 –