En pasados artículos del Manual de Firebug hemos visto cuáles son las funciones del API de la consola y diversos ejemplos para ilustrar su funcionamiento y utilidad. Sin embargo, nos hemos quedado sin ofrecer ejemplos de algunas de las funciones importantes de este API que nos sirven para calcular el tiempo utilizado en ejecutar scripts Javascript.

Así pues, en este artículo vamos a aprender a calcular el tiempo de ejecución de scripts Javascript, lo que se llama habitualmente en la jerga informática como hacer benchmark de aplicaciones, en este caso en el lenguaje Javascript.

Para hacer un benchmark sencillo podríamos realizar nosotros a mano un poco de código Javascript para contar el tiempo, pero existen herramientas que nos dan respuesta a este asunto de una manera bastante más sencilla. Veremos pues cómo la consola de Firebug nos ayudará por medio de una serir de de funciones Javascript que incluye su API.

Funciones para medir tiempo console.time() y console.timeEnd()

Este par de funciones nos sirven para medir el tiempo en milisegundos transcurrido desde que se inicia la cuenta con console.time() y se finaliza con la invocación a console.timeEnd(), momento en el que se mostrarán los milisegundos transcurridos en la consola de Firebug.

Como parámetros en ambas funciones tenemos que enviar una cadena que servirá para identificar el contador de tiempo. Podremos iniciar, por tanto, tantas cuentas de tiempo como queramos, simplemente indicando en console.time() cadenas distintas como parámetro. Cuando querramos cerrar la la cuenta del tiempo y obtener el resultado tenemos que llamar a console.timeEnd() pasándole la cadena del contador de tiempo que queremos detener.

Por ejemplo, podemos ver este código:

console.time("t1");
procesoLargo();
console.timeEnd("t1");

Como vemos, se inicia un contador de tiempo con console.time(), al que hemos llamado "t1". Luego se ejecuta una función que se supone tardará algo de tiempo y con la llamada final a console.timeEnd(), enviando también la cadena "t1", obtenemos el tiempo transcurrido desde que se inició la cuenta de los milisegundos. En otras palabras, con este esquema conseguiríamos saber el tiempo que se tarda en ejecutar la función porcesoLargo().

El contenido de la función procesoLargo() puede ser el que queramos y aunque sea un poco indiferente, tenemos aquí un ejemplo de función que hace un par de bucles y que tardará un poquito en ejecutarse:

function procesoLargo(){
   for (i=0; i<95; i++){
      var z=i*i;
      for (j=0; j<50000; j++){}
   }
}

Perfilar el tiempo de ejecución de funciones Javascript con console.profile()

La funcionalidad "perfilar" es otra de las utilidades que nos provee Firebug para realizar una cuenta de los tiempos que se utilizan en ejecutar los programas. En concreto esta funcionalidad es bastante interesante, ya que trabaja de una manera bastante autónoma y te ofrece un reporte completo de las funciones que se ejecutaron y los tiempos de procesamiento de cada una de ellas.

Para poner en marcha la funcionalidad de "Perfilar" desde Javascript con el API de la consola tenemos que llamar a la función console.profile(), indicando si lo deseamos, un parámetro con una cadena que sirva de título para este informe.

Luego podemos dejar que nuestra aplicación discurra por si sola y se vayan ejecutando sus funciones y de manera automática se estará generando el perfil desde donde vamos a obtener toda la información de benchmarking.

En el momento que deseemos, podemos parar la funcionalidad perfilar, simplemente con una llamada al método console.profileEnd(), con lo que conseguiremos un mensaje completo en la consola de Firebug de todas las funciones que se han ejecutado, junto con el número de llamadas realizadas, el tiempo total empleado, tiempo medio de ejecución, etc.

Como decimos, el informe del perfilado aparecerá en la consola. No nos mostrará el tiempo ocupado entre que se inició el informe y se terminó, pero sí el tiempo de ejecución de las funciones invocadas. Además todos los datos del informe se podrán ver perfectamente tabulados y con opciones para ordenar los registros del informe por cualquiera de los campos que contiene.

Si lo deseas, puedes ver una página de ejemplo donde hacemos benchmark de scripts Javascript utilizando las funciones relatadas anteriormente.