Benchmarking (console time y timeEnd)

¿Cómo identificar procesos lentos en tu código?

En el mundo del desarrollo, uno de los mayores desafíos es detectar procesos que ralentizan el rendimiento de nuestro código. En esta clase, exploraremos técnicas efectivas para identificar y medir tiempos de ejecución en JavaScript, utilizando la consola para facilitar esta tarea.

¿Qué es la función console.time() y cómo se utiliza?

Para determinar cuánto tiempo tarda en ejecutarse un proceso específico en nuestro código, podemos usar console.time(). Esta función nos permite monitorizar el tiempo de ejecución desde el inicio hasta el final de un bloque de código.

Ejemplo práctico

Supongamos que tienes un bucle for que realiza una operación de suma un millón de veces:

let suma = 0;
for (let i = 0; i < 1000000; i++) {
    suma += 1;
}

Para medir cuánto tiempo toma esta operación, utiliza console.time() al principio y console.timeEnd() al final del bucle. Aquí tienes el código:

console.time('bucle');
let suma = 0;
for (let i = 0; i < 1000000; i++) {
    suma += 1;
}
console.timeEnd('bucle');

Con este método, console.time('bucle') inicia el contador y console.timeEnd('bucle') lo detiene, mostrando el tiempo de ejecución en la consola.

¿Cómo medir el tiempo total de ejecución del código?

Para tener una visión completa del rendimiento de tu aplicación, podrías desear calcular el tiempo que toma todo tu código en ejecutarse. Al igual que medimos un proceso individual, podemos medir el tiempo total utilizando las funciones de consola.

console.time('total');
console.time('bucle');

// Tu código aquí

console.timeEnd('bucle');
console.timeEnd('total');

Esto no solo te ayudará a identificar cuellos de botella, sino que también te dará una idea del impacto del rendimiento de cada sección de tu código.

¿Cómo medir procesos asincrónicos?

Las funciones asincrónicas son comunes en JavaScript, y medir su tiempo de ejecución sigue siendo crucial. Para hacer esto, empleamos promesas junto con async/await.

Ejemplo de función asincrónica

function funcionAsincronica() {
    return new Promise((resolve) => {
        setTimeout(() => {
            console.log('Proceso asincrónico terminado');
            resolve();
        }, 1000);
    });
}

console.time('asincronico');
funcionAsincronica().then(() => {
    console.timeEnd('asincronico');
});

En este ejemplo, simulamos un proceso asincrónico con un setTimeout. La función console.time('asincronico') inicia el contador, y console.timeEnd('asincronico') muestra cuánto tiempo ha transcurrido al resolver la promesa.

¿Qué beneficios aporta conocer estos tiempos de ejecución?

• Optimización de código: Puedes identificar y optimizar las partes del código que consumen más tiempo.
• Mantenimiento eficiente: Facilita el mantenimiento al ofrecer claridad sobre qué partes podrían necesitar revisión.
• Mejor experiencia del usuario: Al reducir el tiempo de espera, ofreces una experiencia más fluida y eficaz.

Con esta estrategia, los desarrolladores pueden crear aplicaciones más eficientes y acogedoras, facilitando tanto el mantenimiento como el crecimiento. ¡Sigue explorando y mejorando tus habilidades!