Para optimizar las aplicaciones web es esencial medir el rendimiento del código JavaScript. Este artículo ofrece un enfoque claro y gradual para calcular las métricas de rendimiento utilizando JavaScript.

Comprender las métricas de rendimiento

Las métricas de rendimiento ayudan a los desarrolladores a identificar los cuellos de botella y mejorar la eficiencia de su código. Las métricas comunes incluyen el tiempo de ejecución, el uso de la memoria y la tasa de marco.

Utilizando la API de rendimiento

El API de rendimiento proporciona herramientas para medir diversos aspectos de la ejecución de código. El método performance.now() devuelve un timetamp de alta resolución, ideal para un momento preciso.

Para medir el tiempo de ejecución, grabe los horarios antes y después del bloque de código:

Ejemplio:

const startTime = performance.now();

// Código para la medición

const endTime = performance.now();

duración del conste = tiempo final - startTime;

Cálculo de otras métricas

El uso de la memoria se puede comprobar utilizando el performance.memory objeto, que proporciona detalles como tamaño total de la pila de JS y tamaño de la pila usado. Tenga en cuenta que esta API está soportada principalmente en Chrome.

Para la medición de la velocidad de marco, utilice la función requestAnimationFrame] para seguir el rendimiento de renderización con el tiempo.

Buenas prácticas

Siempre realizar mediciones múltiples veces para tener en cuenta la variabilidad. Use promedios para obtener resultados más precisos. Evite la medición durante períodos de alta actividad que pueden hacer skew datos.

  • Use temporizadores de alta resolución como performance.now()].
  • Ejecute las mediciones varias veces para la precisión.
  • Compare los resultados en condiciones consistentes.
  • Supervisar el uso de la memoria con performance.memory.
  • Seguimiento de rendimiento con SolicitudAnimaciónFrame].