¿Cómo es insertAdjacentHTML mucho más rápido que innerHTML?

About a month ago, Firefox 8 implementó el método insertAdjacentHTML, que se agregó a IE4 junto con innerHTML. De acuerdo con this punto de referencia, insertAdjacentHTML es generalmente un orden de magnitud más rápido que innerHTML.¿Cómo es insertAdjacentHTML mucho más rápido que innerHTML?

Supongo que ambos llaman al mismo analizador de HTML, entonces ¿por qué la diferencia es tan dramática? insertAdjacentHTML es una llamada a un método simple, mientras que innerHTML es un getter/setter y probablemente exista un poco de sobrecarga para eso, pero nunca imaginaría tanto.

Fuente

2011-09-28 Peter C

Tenga en cuenta que el uso de 'appendChild' es mucho más rápido que ambos. Probablemente porque no se necesita un analizador. La diferencia entre 'insertAdjacentHTML' y' innerHTML' parece insignificante en comparación con 'appendChild'. Sin embargo, si necesita analizar la cadena html, 'appendChild' no ayudará mucho. Aquí hay un JSperf detallado: http://jsperf.com/insertadjacenthtml-perf/28 – oriadam

work.innerHTML += "test"; es equivalente a work.innerHTML = work.innerHTML + "test";, es decir, cada vez que se ejecuta debe serializar todos los contenidos existentes de work y luego volver a analizar todo el lote, más el lapso adicional.

work.insertAdjacentHTML("BeforeEnd", "test"); solo está analizando un tramo cada vez y luego adjunta el pequeño fragmento de documento al DOM.

Fuente

2011-09-28 23:28:33 Alohci

Espero que un buen navegador optimice 'work.innerHTML + =" test "' para agregar simplemente 'innerHTML', al igual que el moderno los navegadores optimizan la concatenación de cadenas. Sin embargo, podría estar equivocado, pero sería sorprendente que ninguno de los proveedores de navegadores hubiera pensado en esto. –

No es tan fácil como eso. El ciclo de serialización/análisis tiene una serie de efectos secundarios, como el restablecimiento de algunas propiedades de nodo y la eliminación de controladores de eventos conectados dinámicamente. La optimización requeriría que esos sean replicados exactamente. Los fabricantes de navegadores tienen mejores cosas que hacer. 'Element.innerHTML + = ...' es un antipatrón que es fácil de evitar en el código JS. Simplemente no lo hagas. – Alohci

+1 tiene sentido. No estoy de acuerdo con que 'e.innerHTML + = ...' sea un antipatrón. Hay algunos usos válidos que involucran a Ajax y no veo por qué es dañino (aparte de ser lento) en otros lugares. –

El instalador innerHTML tendrá que eliminar todos los nodos secundarios existentes antes de agregar los nuevos.

No sé si este es el único motivo, pero sin duda es un factor.

Fuente

2011-09-28 22:23:44 user123444555621

¿Cómo es insertAdjacentHTML mucho más rápido que innerHTML?

Respuesta

Cuestiones relacionadas