Os observadores de mutação de DOM são mais lentos que os eventos de mutação de DOM?
O código a seguir utiliza o evento de mutação de DOMDOMNodeInserted para detectar a existência dobody elemento e enrole o seuinnerHTML em um invólucro.
<!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>
E apesar do sucesso da embalagem, há um erro que mostra que um nó não foi encontrado.Esta resposta de uma pergunta explicou que é porque quando jQuery foi carregado, ele adicionou umdiv elemento no corpo para fazer alguns testes, mas não conseguiu remover essediv elemento porque esse elemento foi empacotado no invólucro para que não seja mais um elemento filho do corpo.
O experimento acima nos diz queDOMNodeInserted O evento é mais rápido que os testes do jQuery, porque o elemento de teste do jQuery (div) foi embrulhado antes de ser removido pelo jQuery.
Agora, o código a seguir pode atingir a mesma manipulação e está usando os Observadores de Mutação do DOM recém-introduzidos. A partir deste momento (2012-07-11), funciona apenas no Chrome 18 e superior.
<!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>
Esses códigos não produziram nenhum erro. Isso significa que o jQuery é mais rápido que os Observadores de Mutação do DOM, então ele foi capaz de remover seu elemento de teste (div) antes que esse elemento possa ser envolvido no invólucro.
Dos dois experimentos acima, descobrimos que quando se trata de velocidade de execução:
Eventos de mutação de DOM> testes de jQueryTestes do jQuery> Observadores de Mutação do DOMEsse resultado pode comprovar adequadamente que os Observadores de Mutação do DOM são mais lentos que os Eventos de Mutação do DOM?