Observador de rendimiento: Acceso eficiente a los datos de rendimiento

Las apps web progresivas permiten a los desarrolladores crear una nueva clase de aplicaciones que ofrecen experiencias del usuario confiables y de alto rendimiento. Sin embargo, para asegurarse de que una app web alcance sus objetivos de rendimiento deseados, los desarrolladores necesitan acceso a datos de medición de rendimiento de alta resolución. La especificación de cronograma de rendimiento del W3C define una interfaz de este tipo para que los navegadores proporcionen acceso programático a datos de tiempo de bajo nivel. Esto abre las puertas a algunos casos de uso interesantes:

  • análisis de rendimiento sin conexión y personalizado
  • herramientas de visualización y análisis de rendimiento de terceros
  • evaluación del rendimiento integrada en IDEs y otras herramientas para desarrolladores

El acceso a este tipo de datos de tiempo ya está disponible en la mayoría de los navegadores principales para los tiempos de navegación, los tiempos de recursos y los tiempos del usuario. La incorporación más reciente es la interfaz de observador de rendimiento, que es, en esencia, una interfaz de transmisión para recopilar información de sincronización de bajo nivel de forma asíncrona, ya que el navegador la recopila. Esta nueva interfaz proporciona una serie de ventajas fundamentales sobre los métodos anteriores para acceder al cronograma:

  • Actualmente, las apps deben sondear y comparar periódicamente las mediciones almacenadas, lo que es costoso. Esta interfaz les ofrece una devolución de llamada. (en otras palabras, no es necesario sondear). Como resultado, las apps que usan esta API pueden ser más responsivas y eficientes.
  • No está sujeto a límites de búfer (la mayoría de los búferes se configuran en 150 elementos de forma predeterminada) y evita las condiciones de carrera entre diferentes consumidores que podrían querer modificar el búfer.
  • Las notificaciones del observador de rendimiento se entregan de forma asíncrona y el navegador puede enviarlas durante el tiempo inactivo para evitar competir con el trabajo de renderización crítico.

A partir de Chrome 52, la interfaz del observador de rendimiento está habilitada de forma predeterminada. Veamos cómo usarlo.

<html>
<head>
    <script>
    var observer = new PerformanceObserver(list => {
        list.getEntries().forEach(entry => {
        // Display each reported measurement on console
        if (console) {
            console.log("Name: "       + entry.name      +
                        ", Type: "     + entry.entryType +
                        ", Start: "    + entry.startTime +
                        ", Duration: " + entry.duration  + "\n");
        }
        })
    });
    observer.observe({entryTypes: ['resource', 'mark', 'measure']});
    performance.mark('registered-observer');

    function clicked(elem) {
        performance.measure('button clicked');
    }
    </script>
</head>
<body>
    <button onclick="clicked(this)">Measure</button>
</body>
</html>

Esta página simple comienza con una etiqueta de secuencia de comandos que define un código JavaScript:

  • Creamos una instancia de un nuevo objeto PerformanceObserver y pasamos una función de controlador de eventos al constructor del objeto. El constructor inicializa el objeto de modo que se llame a nuestro controlador cada vez que un nuevo conjunto de datos de medición esté listo para procesarse (con los datos de medición pasados como una lista de objetos). El controlador se define aquí como una función anónima que simplemente muestra los datos de medición con formato en la consola. En una situación real, estos datos se pueden almacenar en la nube para un análisis posterior o pasar a una herramienta de visualización interactiva.
  • Nos registramos en los tipos de eventos de tiempo que nos interesan a través del método observe() y llamamos al método mark() para marcar el instante en el que nos registramos, que consideraremos el comienzo de nuestros intervalos de tiempo.
  • Definimos un controlador de clics para un botón definido en el cuerpo de la página. Este controlador de clics llama al método measure() para capturar datos de tiempo sobre cuándo se hizo clic en el botón.

En el cuerpo de la página, definimos un botón, asignamos nuestro controlador de clics al evento onclick y ya está todo listo.

Ahora, si cargamos la página y abrimos el panel de Chrome DevTools para ver la consola de JavaScript, cada vez que hagamos clic en el botón, se realizará una medición de rendimiento. Y como nos registramos para observar tales mediciones, se reenvían a nuestro controlador de eventos, de forma asíncrona, sin necesidad de sondear el cronograma, que muestra las mediciones en la consola a medida que ocurren:

Observador de rendimiento

El valor start representa la marca de tiempo de inicio de los eventos de tipo mark (de los cuales esta app solo tiene uno). Los eventos con el tipo measure no tienen una hora de inicio inherente; representan mediciones de tiempo tomadas en relación con el último evento mark. Por lo tanto, los valores de duración que se ven aquí representan el tiempo transcurrido entre la llamada a mark(), que sirve como punto de partida de un intervalo común, y varias llamadas posteriores a measure().

Como puedes ver, esta API es bastante simple y ofrece la capacidad de recopilar datos de rendimiento filtrados, de alta resolución y en tiempo real sin sondeos, lo que debería abrir las puertas a herramientas de rendimiento más eficientes para las apps web.