Acceder a DOM elementos tiene un costo, y modificar los elementos DOM es aún más costoso porque hace que el navegador recalcule los cambios geométricos de la página.
Por supuesto, el peor de los casos es acceder al elemento modificado en el bucle, especialmente las operaciones de bucle en colecciones de elementos HTML.
Por ejemplo:
La copia del código es la siguiente:
<!-Antes de la optimización->
<script type = "text/javaScript">
función innerhtmlloop () {
para (var count = 0; Count <15000; Count ++) {
document.getElementById ('aquí'). Innerhtml+= 'a';
}
}
</script>
Esta función se dispara para modificar el contenido del elemento de página. El problema con este código es que cada iteración de bucle, se accede al elemento dos veces: una vez que lea la propiedad InnerHTML y una vez reescribirla.
Un enfoque más eficiente es usar variables locales para almacenar el contenido actualizado y luego escribirlo al mismo tiempo después de que termine el bucle:
La copia del código es la siguiente:
<!-después de la optimización->
<script type = "text/javaScript">
función innerhtmlloop () {
var content = '';
para (var count = 0; Count <15000; Count ++) {
contenido+= 'a';
}
document.getElementById ('aquí'). innerhtml+= content;
}
</script>
Cuantas más veces acceda al DOM, más lento se ejecuta el código. Por lo tanto, cuando hay otras soluciones para reemplazarlas, debemos intentar minimizar el número de visitas al DOM.