Cómo Saber Cuánto Demora un Código JavaScript

3 minuto(s)

En esta página:

Medir el rendimiento de tu código JavaScript es una tarea muy importante.

De esta manera sabrás que fragmente de tu código optimizar para que el proyecto cargue más rápido.

En este tutorial te voy a enseñar a Cómo Saber Cuánto Demora un Código JavaScript, vamos con ello.

Código JavaScript a medir su velocidad — Existen muchas maneras de medir la velocidad de código JavaScript, en este post te comparto una

Para no complicarnos usaremos la consola de nuestro navegador web, yo usaré la consola del navegador Google Chrome.

Medir La Velocidad de un Código JavaScript

En la consola del navegador agregamos el siguiente código:


const tiempoInicio = performance.now();
  
  // Código a ejecutar
  const saludo = "Hola";
  console.log(saludo);
  // Fin Código a ejecutar
  
const tiempoFinal = performance.now();

console.log(`Tiempo de Ejecución: ${tiempoInicio - tiempoFinal} milisegundos`);

const tiempoInicio = performance.now();

// Código a ejecutar

const saludo = "Hola";

console.log(saludo);

// Fin Código a ejecutar

const tiempoFinal = performance.now();

console.log(`Tiempo de Ejecución: ${tiempoInicio - tiempoFinal} milisegundos`);

Podemos ver el resultado que tomo en ejecutarse el código anterior:

Midiendo la velocidad de código JavaScript — Al lado derecho puedes ver los resultados de esta prueba con un código JavaScript base

Medir La Velocidad de Una Función JavaScript

También podemos medir la velocidad de una función, agregamos el siguiente código en la consola:


// Función JavaScript
function mostrarSaludo() {

    fecha = new Date();
    hora = fecha.getHours();
  
    if (hora >= 0 && hora < 12) {
        texto = "Buenos Dias";
    }
  
    if (hora >= 12 && hora < 18) {
        texto = "Buenas Tardes";
    }
  
    if (hora >= 18 && hora < 24) {
        texto = "Buenas Noches";
    }
  
  } 

const tiempoInicio = performance.now()
  
  // Llamamos a la función a ejecutar
  mostrarSaludo();
  
const tiempoFinal = performance.now()

console.log(`Tiempo de Ejecución: ${tiempoInicio - tiempoFinal} milisegundos`)

// Función JavaScript

function mostrarSaludo() {

fecha = new Date();

hora = fecha.getHours();

if (hora >= 0 && hora < 12) {

texto = "Buenos Dias";

}

if (hora >= 12 && hora < 18) {

texto = "Buenas Tardes";

}

if (hora >= 18 && hora < 24) {

texto = "Buenas Noches";

}

const tiempoInicio = performance.now()

// Llamamos a la función a ejecutar

mostrarSaludo();

const tiempoFinal = performance.now()

console.log(`Tiempo de Ejecución: ${tiempoInicio - tiempoFinal} milisegundos`)

Igualmente, podemos ver el resultado que tomo en ejecutarse el código anterior:

Midiendo la velocidad del código de una función JavaScript — Al lado derecho puedes ver los resultados de esta prueba con una función de JavaScript

¿Qué Paso?

Usamos el método performance.now() de JavaScript, el cual devuelve el tiempo transcurrido desde la variable tiempoInicio hasta la variable tiempoFinal.

El tiempo lo devuelve en milisegundos, al restar las variables tiempoInicio y tiempoFinal.

En el resultado del tiempo, le agrega un símbolo “-” al inicio del resultado, no te preocupes, puedes obviarlo y ese sería el tiempo en milisegundos.

Conclusión

En este post has aprendido a Cómo Saber Cuánto Demora un Código JavaScript, los ejemplos son una base para que realices pruebas más avanzadas con código JavaScript.

Nota(s)

También puedes ejecutar las pruebas en Visual Studio Code, usando la extensión Code Runner, esta extensión te permite ejecutar código JavaScript en la terminal de Visual Studio Code presionando las teclas CTRL + ALT + N.
No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo.

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.