Observador de desempenho: acesso eficiente aos dados de desempenho

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

  • análise de desempenho off-line e personalizada
  • ferramentas externas de visualização e análise de desempenho
  • Avaliação de performance integrada a ambientes de desenvolvimento integrado e outras ferramentas para desenvolvedores

O acesso a esse tipo de dados de velocidade 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 de observador de desempenho, que é essencialmente uma interface de streaming para coletar informações de velocidade de baixo nível de forma assíncrona, já que são 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 diferenciar periodicamente as medições armazenadas, o que é caro. Essa interface oferece um callback. Em outras palavras, não há necessidade de fazer enquetes. Como resultado, os apps que usam essa API podem ser mais responsivos e mais eficientes.
  • Ele não está sujeito a limites de buffer (a maioria dos buffers é definida como 150 itens por padrão) e evita disputas entre diferentes consumidores que talvez queiram modificar o buffer.
  • As notificações do observador de desempenho são entregues de forma assíncrona, e o navegador pode enviá-las durante o tempo de inatividade para evitar competir com trabalhos críticos de renderização.

A partir do Chrome 52, a interface do observador de desempenho é 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 definindo um código JavaScript:

  • Instanciamos um novo objeto PerformanceObserver e passamos uma função de manipulador de eventos para o construtor do objeto. O construtor inicializa o objeto de modo que nosso gerenciador seja chamado sempre que um novo conjunto de dados de medição estiver pronto para ser processado (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 direcionados para uma ferramenta de visualização interativa.
  • Nós nos registramos para os tipos de eventos de velocidade em que estamos interessados usando o método observe() e chamamos o método mark() para marcar o momento em que o registro foi feito, o que consideraremos o início dos nossos intervalos de tempo.
  • Definimos um manipulador 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 nosso gerenciador de cliques ao evento onclick e estamos prontos para começar.

Agora, se carregarmos a página e abrirmos o painel do Chrome DevTools para assistir o Console 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 ao nosso manipulador de eventos de maneira assíncrona sem a necessidade de pesquisar a linha do tempo, que exibe as medidas no console à medida que elas ocorrem:

Observador de desempenho.

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

Como você pode notar, essa API é bastante simples e oferece a capacidade de coletar dados de desempenho filtrados e de alta resolução em tempo real sem pesquisa. Isso abre as portas para ferramentas de desempenho mais eficientes para apps da Web.