variable - modificar dom javascript
"InnerHTML+=..." vs "appendChild(txtNode)" (2)
Creé una pequeña esencia con una comparación de rendimiento entre innerHTML y appendChild.
El último gana por un amplio margen
La pregunta es, comparando la concatenación usando innerHTML y añadiendo un nodo de texto a un nodo existente. ¿Qué está sucediendo detrás de la escena?
Mis pensamientos sobre esto hasta ahora:
- Supongo que ambos están causando un ''ReFlow''.
- El último (agregar un nodo de texto), por lo que sé, también causa una reconstrucción completa del DOM (¿correcto? ¿Están haciendo esto los dos?).
- El primero parece tener otros efectos secundarios desagradables, como causar referencias previamente guardadas a nodos secundarios en el nodo Estoy modificando innerHTML, para que ya no apunte a ''el DOM actual'' / ''versión correcta del nodo hijo''. En contraste, cuando se agregan niños, las referencias parecen mantenerse intactas. ¿Por qué es esto?
Espero que ustedes puedan aclarar esto, ¡gracias!
El último ( appendChild ) no causa una reconstrucción completa del DOM o incluso de todos los elementos / nodos dentro del objetivo.
El primero (configuración innerHTML ) causa una reconstrucción completa del contenido del elemento de destino, que si lo agrega no es necesario.
Agregar mediante innerHTML += content hace que el navegador se ejecute a través de todos los nodos en el elemento creando una cadena HTML para dar a la capa de JavaScript. A continuación, su código le agrega texto y establece innerHTML , haciendo que el navegador suelte todos los nodos antiguos en el destino, vuelva a analizar todo ese HTML y cree nuevos nodos. Entonces, en ese sentido, puede no ser eficiente. (Sin embargo, analizar HTML es lo que hacen los navegadores y lo hacen realmente rápido).
Establecer innerHTML invalida de hecho cualquier referencia a los elementos dentro del elemento objetivo que pueda tener, porque esos elementos ya no existen, los eliminó y luego los agregó a otros (que parecen muy similares) cuando establece innerHTML .
En resumen, si está agregando , usaría appendChild (o insertAdjacentHTML , ver más abajo). Si está reemplazando, existen situaciones muy válidas en las que el uso de innerHTML es una mejor opción que crear el árbol usted mismo a través de DOM API (la velocidad es la principal de ellas).
Finalmente, vale la pena mencionar insertAdjacentHTML , que es una función que puede usar para insertar nodos y elementos en o junto a un elemento utilizando una cadena HTML. Puede adjuntarlo a un elemento: theElement.insertAdjacentHTML("beforeend", "the HTML goes here"); El primer argumento es dónde poner el HTML; sus elecciones son "beforebegin" (fuera del elemento, justo delante de él), "afterbegin" (dentro del elemento, al principio), "beforeend" (dentro del elemento, al final) y "afterend" (afuera el elemento, justo después de eso). Tenga en cuenta que "afterbegin" y "beforeend" insertan en el elemento, mientras que "beforebegin" y "afterend" insertan en el elemento principal del elemento. Con el respaldo de todos los principales navegadores de escritorio, no tengo idea de lo bueno que es el soporte móvil (aunque estoy seguro de que iOS Safari y Android 2.x y superiores lo tienen, al menos), pero la cuña es pequeña.