Midiendo el tiempo de ejecución de tu javascript

Con el crecimiento de las aplicaciones web, cada vez es más y más importante la optimización del código, especialmente en el mundo de javascript donde dependemos de los ordenadores de los clientes. Y no sólo la lógica si no también por ejemplo el uso correcto de selectores, es por ello que debemos medir siempre que nos sea posible el tiempo que tardan nuestros scripts en realizar alguna función.

Para ello existen diferentes soluciones, como lo es por ejemplo Speed Tracer que nos permite un análisis óptimo de nuestro código para poder optimizarlo posteriormente.

Pero en muchas ocasiones nos encontramos con que no queremos un análisis tan exhaustivo o no tenemos la posibilidad de realizarlo, por ejemplo en algún dispositivo móvil.

Veamos entonces dos soluciones para optimizar y medir tu código javascript.

Console.time

Una perfecta solución que nos proporciona la consola de javascript de medición del tiempo es el console.time que a mediación de una etiqueta, nos proporcionará el tiempo que ha tardado en realizar la ejecución de alguna tarea.

Veamos el ejemplo:

console.time('Test performance');

for(var i = 0; i < 1000; i++){
    document.querySelectorAll('.test li img[alt="prueba de selector largo de procesar"]');
}

console.timeEnd('Test performance');

Esto nos sacará por la consola de javascript una cosa parecida a esta:

Test performance: 73ms

Hasta aquí perfecto, pero en muchas ocasiones nos encontramos que la consola no dispone de la función time, como puede ser en algunos dispositivos móviles.

Que hacemos entonces?

Dispositivos sin console.time

Podemos usar una pequeña función que inicialice un a variable y guarde el valor del tiempo, para posteriormente compararlo con el actual y ver el tiempo que ha tardado en ejecutarse.

Veamos el ejemplo empaquetado en un pequeño “objeto”:

var Logging = function(){
    this.startTimer = function() {
        this.start = new Date().getTime();
    };

    this.stopTimer = function() {
        return (new Date().getTime()) - this.start;
    };
};

var logging = new Logging();

logging.startTimer();

for(var i = 0; i < 1000; i++){
    document.querySelectorAll('.test li img[alt="prueba de selector largo de procesar"]');
}

console.log('Test performance: ' + logging.stopTimer() + 'ms');
Corre la voz!

Comentarios

  1. ()

    Muchas gracias!

  2. ()

    Excelente, me sirvió para mostrar y ocultar el loading... al cargar una búsqueda con muchos registros :)


Escribir un comentario

Escribe lo que desees, si quieres incluir código hazlo usando los tags <pre>

Nombre:
Email:
Website: