Archivos de Etiqueta: rendimiento

javascript rendimiento

Javascript – rendimiento: generación de nuevo contenido

14 febrero 2011 – 18:45 pm

Gracias a la mejora que ha sufrido los motores de javascript de los navegadores y de la revolución que ha supuesto Ajax para el mundo del desarrollo web, cada vez se ha optado por generación del contenido sin la necesidad de recargar la página.

El problema, es que esta generación al vuelo, si no se hace bien, puede producir que nuestra página sufra grandes retardos e incluso a mucha gente le aparezca el contenido a golpes. Esto suele ser debido a que el contenido que se está generando, se está inyectando al DOM durante su proceso de creación. Esto provoca que recorramos continuamente al DOM. Veamos un ejemplo:

var accessDiv = document.getElementById('access');
for (var i = 0; i < 50; i++){
accessDiv.innerHTML += 'hola';
}

De siguiente forma, generamos el html y una vez generado, entonces lo introducimos en el DOM:

var html = '';
for (var i = 0; i < 50; i++){
html += 'hola';
}
document.getElementById('access').innerHTML = html;
Etiquetas , , | Permalink | Comentar (0)
javascript rendimiento

Javascript – rendimiento: array.length

9 febrero 2011 – 18:41 pm

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.

Etiquetas , | Permalink | Comentar (0)