Performance API: Mide y Analiza el Rendimiento de JavaScript
Aprende a usar performance.now(), mark(), measure() y getEntries() para medir tiempos de ejecución y optimizar tu código.
TL;DR - Resumen rápido
- Performance.now() proporciona timestamps de alta precisión
- mark() crea puntos de referencia en el tiempo
- measure() calcula duración entre dos marks
- getEntries() recupera todas las mediciones realizadas
- Ideal para identificar cuellos de botella y optimizar código
Introducción a Performance API
Medir el rendimiento de código JavaScript es fundamental para crear aplicaciones rápidas y eficientes. La Performance API proporciona herramientas nativas del navegador para medir tiempos de ejecución con precisión de milisegundos, sin depender de librerías externas.
A diferencia de Date.now() que tiene precisión limitada,performance.now() proporciona timestamps monótonos de alta precisión que no cambian con el reloj del sistema. Esto permite mediciones más precisas y comparables para análisis de rendimiento.
¿Por qué no usar Date.now()?
Date.now() puede ser afectado por ajustes del reloj del sistema y tiene precisión de milisegundos. performance.now()es monótono (siempre incrementa), tiene precisión de microsegundos y no es afectado por ajustes del reloj.
¿Qué es Performance API?
Performance API es un conjunto de interfaces del navegador que permiten medir y analizar el rendimiento de aplicaciones web. Proporciona herramientas para crear marcas temporales, medir duraciones, obtener información sobre recursos y recopilar métricas de rendimiento detalladas.
La API está diseñada para ser no intrusiva y tener impacto mínimo en el rendimiento. Las mediciones se almacenan en el navegador y pueden ser recuperadas posteriormente para análisis. Esto permite monitorear el rendimiento sin afectar significativamente la ejecución del código.
- performance.now() proporciona timestamps de alta precisión
- mark() crea puntos de referencia en el tiempo
- measure() calcula duración entre dos marks
- getEntries() recupera todas las mediciones realizadas
- getEntriesByName() filtra mediciones por nombre
performance.now()
performance.now() devuelve el tiempo transcurrido desde que la navegación comenzó, en milisegundos con precisión de microsegundos. Es ideal para medir duraciones de operaciones específicas y comparar tiempos entre diferentes ejecuciones.
El valor devuelto por performance.now() es relativo al inicio de la navegación, no una fecha absoluta. Esto permite medir duraciones de operaciones sin preocuparse por la hora del sistema. Para obtener un timestamp absoluto, puedes sumar performance.timing.navigationStart.
Mejor práctica: Medir múltiples veces
Para mediciones más precisas, ejecuta la misma operación múltiples veces y calcula el promedio. Esto reduce el impacto de variaciones aleatorias del navegador y proporciona resultados más confiables.
performance.mark() y measure()
performance.mark() crea un punto de referencia temporal con un nombre específico. performance.measure() calcula la duración entre dos marks o entre un mark y el tiempo actual. Esto permite medir tiempos de ejecución de bloques específicos de código.
mark() crea un punto temporal con un nombre único.measure() calcula la duración entre dos marks o entre un mark y el tiempo actual. El resultado se almacena como una PerformanceEntry que puede ser recuperada posteriormente con getEntries().
Nombres de marks y measures
Usa nombres descriptivos para marks y measures que indiquen qué estás midiendo. Por ejemplo: 'inicio-render', 'fin-render','renderizado-componente'. Esto facilita el análisis posterior de las mediciones.
Obtener Entradas de Rendimiento
performance.getEntries() recupera todas las entradas de rendimiento almacenadas en el navegador. Puedes filtrar por tipo de entrada (mark, measure, resource, paint, etc.) para obtener solo las mediciones que necesitas analizar.
getEntries() devuelve todas las entradas del tipo especificado.getEntriesByName() filtra por nombre específico. Ambos métodos aceptan un parámetro opcional de filtro para limitar los resultados. Las entradas incluyen información detallada como duración, startTime y otros metadatos según el tipo. Las entradas se acumulan en el navegador, así que recuerda limpiarlas periódicamente con clearMarks() yclearMeasures().
Casos de Uso Prácticos
Performance API tiene múltiples aplicaciones en desarrollo web moderno. Estos patrones demuestran cómo la API puede resolver problemas reales de análisis y optimización de rendimiento.
- Medir tiempos de ejecución de funciones críticas
- Identificar cuellos de botella en el código
- Comparar rendimiento de diferentes implementaciones
- Analizar tiempos de carga de recursos
- Optimizar bucles y operaciones costosas
Este ejemplo muestra cómo medir el tiempo de ejecución de una función específica. Los marks delimitan el inicio y fin de la función, y el measure calcula la duración. Este patrón es útil para identificar qué funciones son lentas y necesitan optimización.
Este patrón compara el rendimiento de diferentes implementaciones de la misma función. Ejecutando cada versión múltiples veces y calculando el promedio, puedes determinar cuál implementación es más eficiente. Esto es fundamental para optimizar algoritmos y estructuras de datos.
Optimización basada en datos
Usa las mediciones de Performance API para tomar decisiones de optimización basadas en datos reales, no en suposiciones. Identifica las funciones más lentas y enfócate tus esfuerzos de optimización donde tienen mayor impacto.
Errores Comunes
Al trabajar con Performance API, hay varios errores comunes que pueden causar mediciones incorrectas, análisis erróneos o código que no funciona como esperas. Conocer estos patrones problemáticos te ayudará a evitarlos.
Usar Date.now() para medir rendimiento es un error común.Date.now() puede ser afectado por ajustes del reloj del sistema y tiene precisión limitada. Usa performance.now() para mediciones más precisas y confiables.
No crear el mark final o no llamar measure() es un error común. Si creas un mark de inicio pero olvidas crear el mark de fin y llamar measure(), la medición no se completará y no podrás obtener el resultado. Siempre crea ambos marks y llama measure().
Crear marks o measures con el mismo nombre puede causar confusiones en el análisis. Cuando usas nombres duplicados, las mediciones más recientes sobrescriben las anteriores, perdiendo información valiosa. Usa nombres únicos y descriptivos para cada medición.
Advertencia: Acumulación de entradas
Las entradas de rendimiento se acumulan en el navegador y no se limpian automáticamente. En aplicaciones de larga duración, esto puede causar memory leaks. Limpia las entradas antiguas con clearMarks(),clearMeasures() o clearResourceTimings()periódicamente.
Resumen: Performance API
Conceptos principales:
- •performance.now() proporciona timestamps de alta precisión
- •mark() crea puntos de referencia en el tiempo
- •measure() calcula duración entre dos marks
- •getEntries() recupera todas las mediciones realizadas
- •Las mediciones se almacenan en el navegador
Mejores prácticas:
- •Usa performance.now() en lugar de Date.now()
- •Usa nombres descriptivos para marks y measures
- •Siempre crea ambos marks antes de llamar measure()
- •Limpia las entradas antiguas periódicamente
- •Mide múltiples veces y calcula el promedio