perfmonHace unas semanas os contaba un truco poco conocido pero muy útil para mostrar datos de modo tabular por la consola durante una sesión de depuración con JavaScript. Hoy traigo un par de trucos más del mismo estilo que estoy seguro de que no son demasiado conocidos tampoco.

Cronometrar código

Una necesidad habitual es medir el tiempo transcurrido al ejecutar determinado código, por ejemplo para tratar de ver cuál de dos estrategias diferentes de código es la más rápida con un número grande de datos o cosas por el estilo.

Una forma habitual de hacerlo es guardar la fecha y hora actuales en una variable antes y después de la ejecución, y luego mostrar por consola la diferencia en milisegundos entre ambas. Sin embargo existe una forma mucho mejor que es utilizar los métodos console.time() y console.timeEnd().

Estos métodos de la consola toman como parámetro el nombre de un contador, de modo que además podemos utilizar más de uno al mismo tiempo, midiendo incluso tiempos en paralelo si fuera necesario.

Por ejemplo, vamos a escribir un par de bucles que cuenten hasta 1 millón y 2 millones respectivamente concatenando una cadena, para simular dos algoritmos que hacen la misma cosa y medir sus tiempos de trabajo (lo sé, un ejemplo tonto, pero para el caso nos vale perfectamente):

console.time("Algoritmo1");
var s = "";
for(var i=0; i<1000000; i++) {
	if (i==500000)
		console.time("Parcial");
	s+=i;
}
console.timeEnd("Parcial");
console.timeEnd("Algoritmo1");

console.time("Algoritmo2");
s = "";
for(var i=0; i<2000000; i++) {
	s+=i;
}
console.timeEnd("Algoritmo2");

Además hemos establecido un contador parcial en la mitad del primer bucle para medir el tiempo en paralelo en el primer bucle.

Este código irá mostrando por la consola los tiempos de cada contador a medida que los finalizamos:

console-time

En Firefox incluso nos muestra un poco más de detalle, indicando el momento en el que se inicia cada contador.

console-time-Firefox

Como vemos, es una forma muy rápida, poco intrusiva y sencilla de poder cronometrar nuestro código.

Además funciona en todos los navegadores, incluso en Internet Explorer :-O

Perfilado al detalle de código, iniciado desde nuestro programa

Si tenemos necesidades de optimización más complejas y nos interesa perfilar el código para determinar exactamente qué está pasando y en dónde se consume el tiempo, todos los navegadores cuentan en sus herramientas de desarrollador de una pestaña para análisis de rendimiento (cuyo nombre puede variar de uno a otro pero siempre es "Performance", "Profile" o similar).

Esta característica nos permite grabar y monitorizar al detalle cada método de nuestro código (y del propio navegador para saber si puede estar interfiriendo) y luego verlo en una gráfica para ver las dependencias y los tiempos.

Aunque es muy sencillo lanzar una sesión de "profiling" manualmente desde estas herramientas, a veces puede ser útil lanzarla y terminarla desde el código, para tener guardado el análisis exclusivamente de la parte de código que nos interesa, y no una sesión completa.

Para ello disponemos de dos métodos de la consola llamados profile() y profileEnd().

Basta llamarlos para iniciar y detener una sesión de "profiling",que luego podemos ver en la pestaña correspondiente de las herramientas del desarrollador:

Console-profile-Chrome

Si llamamos a estos métodos sin pasar parámetro alguno, el navegador le otorga a la sesión el nombre de "Profile N", siendo "N" un número consecutivo del 1 en adelante, como se ve en la figura anterior. Pero podemos llamarlo también con un parámetro textual para darle un nombre a la sesión de "profiling", como he hecho en la segunda parte de la figura anterior.

OJO: en Internet Explorer no funciona, y en Edge, aunque reconoce la función, tampoco ya que dice que este método está marcado como obsoleto (deprecated), así que en la práctica solo nos servirá en Firefox y en Chrome, funcionando mejor en este ultimo.

Aunque si el método no funciona no pasa nada ya que podemos lanzar la sesión de "profiling" a mano, siempre es útil poder hacerlo desde el codigo por los motivos que exponía antes.

¡Espero que te resulte útil!

💪🏻 ¿Este post te ha ayudado?, ¿has aprendido algo nuevo?
Pues NO te pido que me invites a un café... Te pido algo más fácil y mucho mejor

Escrito por un humano, no por una IA