Seguimos con otro punto a tener en cuenta a la hora de mejorar el rendimiento de nuestro código javascript. Supongamos que queremos recorrer todo los elementos DIV de una determinada página. Normalmente el código que haríamos sería el siguiente:
var elementosDiv = document.getElementsByTagName('div');
for (var i = 0; i < elementosDiv.length; i++){
//Trabajar con el array elementosDiv[i]
}
En la variable elementosDiv guardamos un array con todos los elementos DIV que contiene en nuestra página. Después, vamos iterando sobre este array trabajamos con cada uno de los elementos que componen este array. El problema que tiene este código, es que la variable elementosDiv contiene un array de elementos vivos, es decir, contiene una referencia directa al objeto DOM de nuestra página. Si durante la ejecución del bucle se agrega un nuevo elemento DIV a la página, automáticamente elementosDiv.length valdrá lo que valía antes más uno. Esto nos indica que para cada iteración del bucle, nuestro código solicita que se cuenten cuantos elementos DIV tiene el objeto DOM, lo cual produce una gran carga al navegador.
Para evitar este comportamiento, es tan sencillo como guardar cuantos elementos DIV hay justo antes de comenzar con la iteración.
var elementosDiv = document.getElementsByTagName('div');
for (var i = 0, count = elementosDiv.length; i < count; i++){
//Trabajar con el array elementosDiv[i]
}
En este código, justo cuando se inicializa el bucle, se guarda en la variable count el número de elementos del array. De esta forma, ya no es necesario que en cada iteración del bucle se tenga que ir a contar el número de elementos DIV al objeto DOM.
Quien soy