Análisis de la API de rendimiento | Programar Plus

La API de rendimiento de JavaScript es prudente, porque entrega herramientas para medir con precisión el rendimiento de las páginas web, que, a pesar de que se realiza desde hace mucho tiempo, nunca llegó a ser lo suficientemente fácil o preciso.

Dicho esto, no es tan fácil comenzar con la API como usarla. Aunque he visto extensiones cubiertas aquí y allá en otras publicaciones, el panorama general que une todo es difícil de encontrar.

Una mirada a cualquier documento que explique el mundo performance interfaz (el punto de acceso para la API de rendimiento) y lo bombardearán con una gran cantidad de otras especificaciones, incluida la API de tiempo de alta resolución, la API de línea de tiempo de rendimiento y la API de navegación, entre muchas, muchas otras. Es suficiente para hacer que el concepto general sea más que un poco confuso en cuanto a lo que mide exactamente la API pero, lo que es más importante, hace que sea fácil pasar por alto las ventajas específicas que obtenemos con ella.

Aquí hay una ilustración de cómo encajan todas estas piezas. Esto puede ser muy confuso, por lo que tener una imagen puede ayudar a aclarar de qué estamos hablando.

La API de rendimiento incluye la API de línea de tiempo de rendimiento y, en conjunto, constituyen una amplia gama de métodos que obtienen métricas útiles sobre el rendimiento de la página web.

Vamos a cavar, ¿de acuerdo?

API de tiempo de alta resolución

El performance La interfaz es parte de la API de tiempo de alta resolución.

“¿Qué es el tiempo de alta resolución?” podrías preguntar. Ese es un concepto clave que no podemos pasar por alto.

Un tiempo basado en el Date tiene una precisión de milisegundos. Un tiempo de alta resolución, por otro lado, es preciso hasta fracciones de milisegundos. Eso es bastante preciso, lo que lo hace más ideal para obtener mediciones precisas del tiempo.

Vale la pena señalar que un tiempo de alta resolución medido por User Agent (UA) no cambia con ningún cambio en el tiempo del sistema porque se toma de un reloj global y cada vez más monótono creado por UA. El tiempo siempre aumenta y no puede ser forzado a reducir. Eso se convierte en una restricción útil para la medición del tiempo.

Cada medición de tiempo medida en la API de rendimiento es un tiempo de alta resolución. Eso no solo lo convierte en una forma súper precisa de medir el rendimiento, sino que también es lo que hace que la API sea parte de la API de tiempo de alta resolución y por qué vemos que los dos se mencionan a menudo juntos.

API de línea de tiempo de rendimiento

La API de línea de tiempo de rendimiento es una extensión de la API de rendimiento. Eso significa que donde la API de rendimiento es parte de la API de tiempo de alta resolución, la API de línea de tiempo de rendimiento es parte de la API de rendimiento.

O, para decirlo más sucintamente:

High Resolution Time API
└── Performance API
    └── Performance Timeline API

Performance Timeline API nos brinda acceso a casi todas las medidas y valores que podemos obtener de la API de rendimiento. Esa es mucha información a nuestro alcance con una sola API y por qué el diagrama al comienzo de este artículo los muestra casi en el mismo plano que los demás.

Hay muchas extensiones de la API de rendimiento. Cada uno devuelve entradas relacionadas con el rendimiento y se puede acceder a todas ellas e incluso filtrarlas a través de Performance Timeline, lo que hace que esta API sea imprescindible para cualquiera que quiera comenzar con las mediciones de rendimiento. Están tan íntimamente relacionados y son complementarios que tiene sentido estar familiarizado con ambos.

Los siguientes son tres métodos de Performance Timeline API que se incluyen en el performance interfaz:

  • getEntries()
  • getEntriesByName()
  • getEntriesByType()

Cada método devuelve una lista de entradas de rendimiento (opcionalmente filtradas) recopiladas de todas las demás extensiones de la API de rendimiento y nos familiarizaremos con ellas a medida que avanzamos.

Otra interfaz clave incluida en la API es PerformanceObserver. Observa si hay una nueva entrada en una lista dada de entradas de desempeño y notifica lo mismo. ¡Muy útil para el monitoreo en tiempo real!

Las entradas de rendimiento

Las cosas que medimos con la API de rendimiento se denominan “entradas” y todas ofrecen mucha información sobre el rendimiento web.

¿Curioso cuáles son? MDN tiene una lista completa que probablemente se actualizará a medida que se publiquen nuevos elementos, pero esto es lo que tenemos actualmente:

Entrada Que mide API principal
frame Mide fotogramas, que representan un bucle de la cantidad de trabajo que debe realizar un navegador para procesar cosas como eventos DOM, cambio de tamaño, desplazamiento y animaciones CSS. API de temporización de fotogramas
mark Crea una marca de tiempo en la línea de tiempo de rendimiento que proporciona valores para un nombre, hora de inicio y duración. API de tiempo de usuario
measure Similar a mark en el sentido de que son puntos en la línea de tiempo, pero se nombran para usted y se colocan entre marcas. Básicamente, son un punto medio entre marcas sin valor de nombre personalizado. API de tiempo de usuario
navigation Proporciona contexto para la operación de carga, como los tipos de eventos que ocurren. API de temporización de navegación
paint Informa momentos en los que los píxeles se representan en la pantalla, como la primera pintura, la primera pintura con contenido, la hora de inicio y la duración total. API de tiempo de pintura
resource Mide la latencia de las dependencias para renderizar la pantalla, como imágenes, scripts y hojas de estilo. ¡Aquí es donde el almacenamiento en caché marca la diferencia! API de temporización de recursos

Veamos algunos ejemplos que ilustran cómo se ve cada API en uso. Para obtener más información sobre ellos, puede consultar las especificaciones vinculadas en la tabla anterior. La API de Frame Timing todavía está en desarrollo.

API de tiempo de pintura, convenientemente, ya se ha cubierto a fondo en CSS-Tricks, pero aquí hay un ejemplo de extracción de la marca de tiempo para cuando comienza la pintura:

// Time when the page began to render 
console.log(performance.getEntriesByType('paint')[0].startTime)

El API de tiempo de usuario puede medir el rendimiento de los scripts de desarrollador. Por ejemplo, supongamos que tiene un código que valida un archivo cargado. Podemos medir el tiempo que tarda en ejecutarse:

// Time to console-print "hello"
// We could also make use of "performance.measure()" to measure the time
// instead of calculating the difference between the marks in the last line.
performance.mark('')
console.log('hello')
performance.mark('')
var marks = performance.getEntriesByType('mark')
console.info(`Time took to say hello ${marks[1].startTime - marks[0].startTime}`)

El API de temporización de navegación muestra métricas de carga de la página actual, métricas incluso de cuando se produjo la descarga de la página anterior. Podemos medir con mucha precisión exactamente cuánto tarda en cargarse una página actual:

// Time to complete DOM content loaded event
var navEntry = performance.getEntriesByType('navigation')[0]
console.log(navEntry.domContentLoadedEventEnd - navEntry.domContentLoadedEventStart)

El API de temporización de recursos es similar a la API de tiempo de navegación en que mide los tiempos de carga, excepto que mide todas las métricas para cargar los recursos solicitados de una página actual, en lugar de la página actual en sí. Por ejemplo, podemos medir cuánto tarda en cargarse en la página una imagen alojada en otro servidor, como un CDN:

// Response time of resources
performance.getEntriesByType('resource').forEach((r) => {
console.log(`response time for ${r.name}: ${r.responseEnd - r.responseStart}`);
});

La anomalía de navegación

¿Quieres escuchar un dato interesante sobre la API de tiempo de navegación?

Fue concebido antes que la API Performance Timeline. Por eso, aunque puedes acceder a algunas métricas de navegación usando la API de Performance Timeline (filtrando el navigation tipo de entrada), la propia API de tiempo de navegación tiene dos interfaces que se extienden directamente desde la API de rendimiento:

  • performance.timing
  • performance.navigation

Todas las métricas proporcionadas por performance.navigation puede ser proporcionado por navigation entradas de la API Performance Timeline. En cuanto a las métricas de las que obtienes performance.timing, sin embargo, solo algunos son accesibles desde la API Performance Timeline.

Como resultado, usamos performance.timing para obtener las métricas de navegación de la página actual en lugar de usar la API de línea de tiempo de rendimiento a través de performance.getEntriesByType("navigation"):

// Time from start of navigation to the current page to the end of its load event
addEventListener('load', () => {
	with(performance.timing) 
		console.log(navigationStart - loadEventEnd);
})

Terminemos con esto

Diría que su mejor opción para comenzar con la API de rendimiento es comenzar por familiarizarse con todos los tipos de entradas de rendimiento y sus atributos. Esto lo familiarizará rápidamente con los resultados finales de todas las API y el poder que esta API proporciona para medir el rendimiento.

Como segundo curso de acción, conozca cómo la API Performance Timeline analiza todas esas métricas disponibles. Como cubrimos, los dos están estrechamente relacionados y la interacción entre los dos puede abrir métodos de medición interesantes y útiles.

En ese punto, puede hacer un movimiento para dominar el fino arte de poner en uso las otras API extendidas. Ahí es donde todo se une y finalmente puedes ver la imagen completa de cómo todas estas API, métodos y entradas están interconectados.

(Visited 2 times, 1 visits today)