Observador de desempenho: acesso eficiente aos dados de desempenho

Os Progressive Web Apps permitem que os desenvolvedores criem uma nova classe de aplicativos que oferecem experiências do usuário confiáveis e de alto desempenho. No entanto, para garantir que um app da Web esteja atingindo as metas de performance desejadas, os desenvolvedores precisam ter acesso a dados de medição de performance de alta resolução. A especificação da linha do tempo de desempenho do W3C define essa interface para que os navegadores forneçam acesso programático a dados de tempo de baixo nível. Isso abre as portas para alguns casos de uso interessantes:

  • análise de desempenho off-line e personalizada
  • ferramentas de análise e visualização de desempenho de terceiros
  • avaliação de desempenho integrada a ambientes de desenvolvimento integrados e outras ferramentas para desenvolvedores

O acesso a esse tipo de dados de tempo já está disponível na maioria dos principais navegadores para tempo de navegação, tempo de recursos e tempo do usuário. A adição mais recente é a interface performance observer, que é basicamente uma interface de streaming para coletar informações de tempo de baixo nível de forma assíncrona, conforme coletadas pelo navegador. Essa nova interface oferece várias vantagens importantes em relação aos métodos anteriores para acessar a linha do tempo:

  • Atualmente, os apps precisam pesquisar e comparar periodicamente as medições armazenadas, o que é caro. Essa interface oferece um callback. Em outras palavras, não é necessário fazer uma pesquisa. Como resultado, os apps que usam essa API podem ser mais responsivos e eficientes.
  • Ele não está sujeito a limites de buffer (a maioria dos buffers é definida como 150 itens por padrão) e evita condições de disputa entre consumidores diferentes que podem querer modificar o buffer.
  • As notificações do Observador de desempenho são enviadas de forma assíncrona, e o navegador pode enviá-las durante o tempo de inatividade para evitar competir com o trabalho de renderização crítico.

A partir do Chrome 52, a interface do Performance Observer é ativada por padrão. Vamos conferir como usá-lo.

<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 simples começa com uma tag de script que define um código JavaScript:

  • Instanciamos um novo objeto PerformanceObserver e transmitimos uma função de gerenciador de eventos para o construtor do objeto. O construtor inicializa o objeto para que nosso gerenciador seja chamado sempre que um novo conjunto de dados de medição estiver pronto para processamento (com os dados de medição transmitidos como uma lista de objetos). O gerenciador é definido aqui como uma função anônima que simplesmente exibe os dados de medição formatados no console. Em um cenário real, esses dados podem ser armazenados na nuvem para análise posterior ou encaminhados para uma ferramenta de visualização interativa.
  • Registramos os tipos de eventos de temporização de que estamos interessados pelo método observe() e chamamos o método mark() para marcar o instante em que registramos, que vamos considerar o início dos nossos intervalos de temporização.
  • Definimos um gerenciador de cliques para um botão definido no corpo da página. Esse gerenciador de cliques chama o método measure() para capturar dados de tempo sobre quando o botão foi clicado.

No corpo da página, definimos um botão, atribuímos o manipulador de clique ao evento onclick e estamos prontos para começar.

Agora, se carregarmos a página e abrirmos o painel do Chrome DevTools para observar o console do JavaScript, toda vez que clicarmos no botão, uma medição de desempenho será feita. Como nos registramos para observar essas medições, elas são encaminhadas para nosso manipulador de eventos de forma assíncrona, sem a necessidade de consultar a linha do tempo, que exibe as medições no console conforme elas ocorrem:

Observador de desempenho.

O valor start representa o carimbo de data/hora inicial para eventos do tipo mark (do qual este app tem apenas um). Os eventos com o tipo measure não têm um horário de início inerente. Eles representam medições de tempo feitas em relação ao último evento mark. Assim, os valores de duração mostrados aqui representam o tempo decorrido entre a chamada para mark(), que serve como um ponto de partida comum do intervalo, e várias chamadas subsequentes para measure().

Como você pode ver, essa API é bastante simples e oferece a capacidade de coletar dados de desempenho filtrados, de alta resolução e em tempo real sem polling, o que deve abrir caminho para ferramentas de desempenho mais eficientes para apps da Web.