Optimizar Javascript con Firebug

En el trabajo tenía un script de Javascript que, cuando se cargaban muchos elementos en el DOM, tardaba casi 2 minutos en inicializar todos los objetos y eventos. No siendo un Javascript Expert, he tenido que optimizar el código para que siguiera funcionando correctamente, pero teniendo que esperar mucho menos a tenerlo todo listo. Quiero explicar mi experiencia y las herramientas que he descubierto, por si a alguien lo son de utilidad.

Primero descubrí que la página (el código HTML) tardaba poco más de 2 segundo en llegar y ser procesada por el navegador. Entre cagar y procesar el CSS, tardaba otro segundo largo. Y en cargar el Javascript y procesar todo el contenido, efectuando todos los cálculos iniciales, y añadiendo todos los eventos necesarios a los elementos del DOM, tardaba 1 minuto con 45 segundo.

Para conocer estos valores utilice Firebug. En su pestaña de “Red“, pude ver los tiempos de carga de cada archivo y el tiempo total necesario hasta que el navegador volvía a reaccionar. En cada prueba, Firefox iba devorando la RAM como quien come palomitas en el cine.

Firebug pestaña Red

Cuando empecé a mirar los problemas del Javascript, empecé por ir comentando código para ir viendo donde estaba. Principalmente había tres zonas con problemas: búsqueda y capturación de elementos del HTML, modificación de estados y estilos de elementos HTML, y cálculos iniciales a partir de los elementos HTML existentes.

Posteriormente, tenía que medir el tiempo de ejecución de cada proceso, para poder comparar con las mejorar que iba a hacer. Entonces descubrí otra funcionalidad más de Firebug. Esta herramienta tiene un gran potencial, y aunque todos los desarrolladores la usamos, no conocemos todas las posibilidades que ofrece.

En el objeto console, hay un par de métodos para conseguir tiempos de ejecución o hacer profiling de una porción de código.

console.time( name )

Crea un cronómetro con el nombre indicado, que será detenido y mostrado con console.timeEnd() con la etiqueta indicada.

myFunc = function() {
    var a = [];
}				
 
console.time('timer myFunc');
myFunc();
console.timeEnd('timer myFunc');

console.profile( [name] )

Crea un Javascript Profiler que será detenido con console.profileEnd(). Se puede usar sin etiqueta. Solamente se puede usar con funciones, así que si se quiere hacer profiling de un bucle, hará falta hacer un closure (una función anónima).

myFunc = function() {
    var a = [];
}				
 
console.profile();
myFunc();
console.profileEnd();
<pre>console.profile('my profile');
(function() {
 for ( var i = 100000; i--; ) {
  var a  = new Array();
 }
})();
console.profileEnd('my profile');

Firebug Profile

Gracias a la ayuda de Adrià, conseguí bajar a 12 segundos toda la carga de la página.

Vía Stoimen’s web log.

Link Firebug – Console API

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>