Наблюдатели мутации DOM медленнее, чем события мутации DOM?
Следующий код использует событие DOM MutationDOMNodeInserted обнаружить существование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 элемент в теле, чтобы сделать некоторые тесты, но он не смог удалить этоdiv элемент, потому что этот элемент был обернут в оболочку, так что он больше не является дочерним элементом тела.
Приведенный выше эксперимент говорит нам, чтоDOMNodeInserted событие быстрее, чем тесты 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 Mutation Events > jQuery's tests jQuery's tests > DOM Mutation ObserversМожет ли этот результат надлежащим образом доказать, что DOM Mutation Observers медленнее, чем DOM Mutation Events?