¿Son los observadores de mutación DOM más lentos que los eventos de mutación DOM?
El siguiente código utiliza DOM Mutation EventDOMNodeInserted para detectar la existencia de labody elemento y envolver suinnerHTML en una envoltura.
<!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>
Y a pesar del éxito de la envoltura, hay un error que muestra que no se encontró un nodo.Esta respuesta de una pregunta explicó que es porque cuando se había cargado jQuery, se agregó unadiv Elemento en el cuerpo para hacer algunas pruebas, pero no pudo eliminar esediv Elemento porque ese elemento se ha envuelto en el envoltorio para que ya no sea un elemento secundario del cuerpo.
El experimento anterior nos dice queDOMNodeInserted El evento es más rápido que las pruebas de jQuery porque el elemento de prueba de jQuery (div) se envolvió antes de que jQuery lo pueda quitar.
Ahora, el siguiente código puede lograr la misma manipulación, y está utilizando los nuevos Observadores de Mutación DOM. A partir de este momento (2012-07-11), solo funciona en Chrome 18 y 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>
Estos códigos no produjeron ningún error. Eso significa que jQuery es más rápido que los observadores de mutaciones de DOM, por lo que pudo eliminar su elemento de prueba (div) antes de que ese elemento pueda ser envuelto en la envoltura.
De los dos experimentos anteriores, encontramos que cuando se trata de la velocidad de ejecución:
Eventos de Mutación DOM> Pruebas de jQueryPruebas de jQuery> DOM Mutation Observers¿Puede este resultado probar adecuadamente que los observadores de mutación de DOM son más lentos que los eventos de mutación de DOM?