"innerHTML += ..." frente a "appendChild(txtNode)"
La pregunta es comparar la concatinación usando internalHTML y agregar un nodo de texto a un nodo existente. ¿Qué está pasando detrás de escena?
Mis pensamientos sobre esto hasta ahora:
- Supongo que ambos están provocando un "ReFlow".
- Este último (agregar un nodo de texto), por lo que sé, también provoca una reconstrucción completa del DOM (¿correcto? ¿Ambos están haciendo esto?).
- El primero parece tener otros efectos secundarios desagradables, como hacer que las referencias previamente guardadas a nodos secundarios del nodo que estoy modificando internalHTML ya no apunten al 'DOM actual'/'versión correcta del nodo secundario'. Por el contrario, cuando se añaden niños, las referencias parecen permanecer intactas. ¿Por qué es esto?
Espero que puedan aclararme esto, ¡gracias!
Feb 21
'10 18:02
Este último ( appendChild) no causa una reconstrucción completa del DOM o incluso de todos los elementos/nodos dentro del objetivo.
La primera (configuración innerHTML) provoca una reconstrucción completa del contenido del elemento de destino, que si lo agrega es innecesario.
Agregar vía innerHTML += contenthace que el navegador recorra todos los nodos del elemento creando una cadena HTML para entregar a la capa de JavaScript. Luego, su código le agrega texto y establece innerHTML, lo que hace que el navegador elimine todos los nodos antiguos en el destino, vuelva a analizar todo ese HTML y cree nuevos nodos. Entonces, en ese sentido, puede que no sea eficiente. (Sin embargo, analizar HTML es lo que hacen los navegadores y son muy, muy rápidos en eso).
De hecho, la configuración innerHTMLinvalida cualquier referencia a elementos dentro del elemento de destino que pueda tener; debido a que esos elementos ya no existen, los eliminó y luego colocó otros nuevos (que se ven muy similares) cuando configuró innerHTML.
En resumen, si agregas , usaría appendChild(o insertAdjacentHTML, ver más abajo). Si está reemplazando, hay situaciones muy válidas en las que usar innerHTMLes una mejor opción que crear el árbol usted mismo a través de la API DOM (la velocidad es la principal entre ellas).
Finalmente, vale la pena mencionar un par de alternativas más:
appendes una adición relativamente reciente al DOM (pero tiene un excelente soporte aparte de los navegadores verdaderamente obsoletos). Agrega uno o más elementos al elemento, donde los elementos pueden ser nodos, elementos o cadenas HTML que definen nodos y elementos. A diferencia deappendChild, admite cadenas HTML y nodos, y también admite múltiples argumentos. Para su caso de uso, es menos engorroso que la siguiente opción de esta lista:parent.append(htmlString).insertAdjacentHTMLinserta nodos y elementos que usted proporciona como una cadena HTML dentro o junto a un elemento. Puedes agregarlo a un elemento:theElement.insertAdjacentHTML("beforeend", "the HTML goes here");El primer argumento es dónde colocar el HTML; tus opciones son:"beforebegin"(fuera del elemento, justo delante de él)"afterbegin"(dentro del elemento, al principio)"beforeend"(dentro del elemento, al final)"afterend"(fuera del elemento, justo después de él) Tenga en cuenta que"afterbegin"e"beforeend"inserte en el elemento mismo, mientras que"beforebegin"e"afterend"inserte en el elemento principal . El soporte del navegador es básicamente universal .
insertAdjacentTextes igualinsertAdjacentHTMLexcepto que inserta un nodo de texto (el texto no se trata como HTML). El soporte del navegador es básicamente universal .
Creé una pequeña esencia con una comparación de rendimiento entre internalHTML y appendChild.
El último gana por amplio margen.
https://gist.github.com/oliverfernandez/5619180
