Analisar o desempenho do ambiente de execução

Kayce Basques

Observação:consulte Otimizar a velocidade do site para saber como fazer com que suas páginas carreguem mais rápido.

O desempenho de execução é o desempenho da sua página quando ela está em execução, em vez de carregamento. Este tutorial ensina como usar o painel de desempenho do Chrome DevTools para analisar o desempenho de execução. Em termos do modelo RAIL, as habilidades que você aprendeu neste tutorial são úteis para analisar as fases de resposta, animação e inatividade da sua página.

Atenção: este tutorial é baseado no Chrome 129. Se você usa outra versão do Chrome, a interface e os recursos do DevTools podem ser diferentes. Verifique em chrome://help qual versão do Chrome você está usando.

Primeiros passos

Neste tutorial, vamos usar o painel Performance para encontrar um gargalo de desempenho em uma página ativa. Para começar:

1. Abra o Google Chrome no Modo de navegação anônima. O modo de navegação anônima garante que o Chrome seja executado em um estado limpo. Por exemplo, se você tiver muitas extensões instaladas, elas podem criar ruído nas suas medições de desempenho.

2. Carregue a página a seguir na janela anônima. Esta é a demonstração que você vai criar. A página mostra vários quadrados azuis pequenos subindo e descendo.

   https://googlechrome.github.io/devtools-samples/jank/

3. Pressione Command+Option+I (Mac) ou Control+Shift+I (Windows, Linux) para abrir as Ferramentas do desenvolvedor.

   

   Observação: nas outras capturas de tela, o DevTools está desencaixado em uma janela separada para que você possa conferir melhor o conteúdo.

Simular uma CPU para dispositivos móveis

Os dispositivos móveis têm muito menos capacidade de CPU do que os computadores e laptops. Sempre que você criar o perfil de uma página, use a limitação de CPU para simular o desempenho dela em dispositivos móveis.

1. Nas Ferramentas do desenvolvedor, clique na guia Performance.
2. Verifique se a caixa de seleção Capturas de tela check_box está ativada.
3. Clique em Configurações de captura Configurações. As ferramentas do desenvolvedor revelam as configurações relacionadas à captura de métricas de desempenho.

4. Em CPU, selecione Lentidão 4x. O DevTools limita a CPU para que ela seja quatro vezes mais lenta do que o normal.

   

   Observação: ao testar outras páginas, se você quiser garantir que elas funcionem bem em dispositivos móveis de baixo custo, defina o throttling da CPU como 20 vezes mais lento. Esta demonstração não funciona bem com desaceleração de 20x, portanto, ela usa desaceleração de 4x para fins instrutivos.

Configurar a demonstração

É difícil criar uma demonstração de desempenho de execução que funcione de forma consistente para todos os leitores deste site. Nesta seção, você pode personalizar a demonstração para garantir que sua experiência seja relativamente consistente com as capturas de tela e descrições mostradas neste tutorial, independentemente da configuração específica.

1. Continue clicando em Adicionar 10 até que os quadrados azuis se movam visivelmente mais devagar do que antes. Em uma máquina de última geração, pode levar cerca de 20 cliques.

2. Clique em Otimizar. Os quadrados azuis vão se mover mais rápido e com mais fluidez.

   Observação: se você não notar uma diferença perceptível entre as versões otimizada e não otimizada, clique em Subtrair 10 algumas vezes e tente novamente. Se você adicionar muitos quadrados azuis, vai usar a CPU ao máximo e não vai notar uma grande diferença nos resultados das duas versões.

3. Clique em Desotimizar. Os quadrados azuis se movem mais devagar e com mais instabilidade.

Gravar a performance do ambiente de execução

Quando você executou a versão otimizada da página, os quadrados azuis se movem mais rápido. Por quê? Ambas devem mover cada quadrado na mesma quantidade de espaço no mesmo período. Faça uma gravação no painel Performance para saber como detectar o gargalo de desempenho na versão não otimizada.

1. No DevTools, clique em Record radio_button_checked. O DevTools captura métricas de desempenho à medida que a página é executada.

   

2. Aguarde alguns segundos.

3. Clique em Interromper. As Ferramentas do desenvolvedor param a gravação, processam os dados e mostram os resultados no painel Performance.

   

Nossa, essa é uma quantidade enorme de dados. Não se preocupe, isso vai fazer sentido em breve.

Analisar os resultados

Depois de ter uma gravação de desempenho, você pode analisar a gravidade do problema e encontrar as causas.

Analisar quadros por segundo

A principal métrica para medir a performance de qualquer animação é frames por segundo (FPS). Os usuários ficam felizes quando as animações são executadas a 60 QPS.

1. Observe o gráfico de QPS. Sempre que você notar uma barra vermelha acima de FPS, significa que a taxa de frames caiu tanto que provavelmente está prejudicando a experiência do usuário.

   

2. Abaixo do gráfico de QPS, você encontra o gráfico de CPU. As cores no gráfico CPU correspondem às cores da guia Resumo, na parte de baixo do painel Performance. O fato de o gráfico da CPU estar cheio de cores significa que a CPU atingiu o limite durante a gravação. Sempre que a CPU estiver no máximo por longos períodos, é uma indicação de que você precisa encontrar maneiras de fazer menos trabalho.

   

3. Passe o cursor sobre os gráficos QPS, CPU ou NET. O DevTools mostra uma captura de tela da página naquele momento. Mova o mouse para a esquerda e para a direita para reproduzir a gravação. Isso é chamado de "scrubbing" e é útil para analisar manualmente a progressão das animações.

   

4. Na seção Frames, passe o cursor sobre um dos quadrados verdes. As Ferramentas do desenvolvedor mostram a QPS desse frame específico. Cada frame provavelmente está bem abaixo da meta de 60 QPS.

   

É claro que, com essa demonstração, é bastante óbvio que a página não está funcionando bem. Mas, em cenários reais, isso pode não ser tão claro. Por isso, ter todas essas ferramentas para fazer medições é útil.

Bônus: abrir o medidor de QPS

Outra ferramenta útil é o medidor de QPS, que fornece estimativas em tempo real de QPS à medida que a página é executada.

1. Pressione Command+Shift+P (Mac) ou Control+Shift+P (Windows, Linux) para abrir o menu de comando.
2. Comece a digitar Rendering no menu de comando e selecione Mostrar renderização.

3. No painel Renderização, ative a opção Mostrar estatísticas de renderização. Uma nova sobreposição aparece no canto superior direito do viewport.

   

4. Desative o medidor de QPS e pressione Escape para fechar o painel Renderização. Não vamos usá-lo neste tutorial.

Encontrar o gargalo

Agora que você mediu e verificou que a animação não está funcionando bem, a próxima pergunta a ser respondida é: por quê?

1. Observe a guia Resumo. Quando nenhum evento é selecionado, essa guia mostra um detalhamento da atividade. A página passou a maior parte do tempo renderizando. Como a performance é a arte de fazer menos trabalho, seu objetivo é reduzir o tempo gasto com a renderização.

   

2. Expanda a seção Principal. As Ferramentas do desenvolvedor mostram um gráfico de chamas da atividade na linha de execução principal ao longo do tempo. O eixo x representa a gravação ao longo do tempo. Cada barra representa um evento. Uma barra mais larga significa que o evento levou mais tempo. O eixo y representa a pilha de chamadas. Quando os eventos estão empilhados, significa que os eventos de cima causaram os de baixo.

   

3. Há muitos dados na gravação. Aplique zoom em um único evento Animation Frame Fired clicando, segurando e arrastando o mouse sobre a Visão geral, que é a seção que inclui os gráficos FPS, CPU e NET. A seção Principal e a guia Resumo mostram apenas informações sobre a parte selecionada da gravação.

   

   Dica: você também pode usar WASD para navegar pela gravação. Foque a seção Main clicando no plano de fundo ou selecionando um evento. Em seguida, pressione W para aumentar o zoom, S para diminuir, A para rolar para a esquerda ou D para rolar para a direita.

4. Observe o triângulo vermelho no canto superior direito dos eventos Task e layout. Sempre que você encontrar um triângulo vermelho, é um aviso de que pode haver um problema relacionado a esse evento. Um triângulo vermelho em uma tarefa significa que ela foi longa.

5. Clique no evento Animation Frame Fired. A guia Resumo agora mostra informações sobre esse evento. Clicar no link ao lado de Iniciado por faz com que as Ferramentas do desenvolvedor destaquem o evento que iniciou o evento Animation Frame Fired. Observe também o link app.update @. Clicar nele leva você à linha relevante no código-fonte.

   

   Observação: depois de selecionar um evento, use as teclas de seta para selecionar os eventos ao lado dele.

6. No evento app.update, há vários eventos roxos. Se elas forem mais largas, parece que cada uma delas pode ter um triângulo vermelho. Clique em um dos eventos Layout roxos agora. As ferramentas do desenvolvedor fornecem mais informações sobre o evento na guia Resumo. De fato, há um aviso sobre reflows forçados (outra palavra para layout).

7. Na guia Resumo, clique no link ao lado de app.update @ em Quadro de animação solicitado. O DevTools leva você à linha de código que forçou o layout.

   

   Observação: o problema com esse código é que, em cada frame da animação, ele muda o estilo de cada quadrado e consulta a posição de cada um deles na página. Como os estilos mudaram, o navegador não sabe se a posição de cada quadrado mudou. Por isso, ele precisa refazer o layout do quadrado para calcular a posição dele. Consulte Evitar layouts síncronos forçados para saber mais.

Ufa. Foi muita informação, mas agora você tem uma base sólida no fluxo de trabalho básico para analisar o desempenho do ambiente de execução. Bom trabalho!

Bônus: analisar a versão otimizada

Usando os fluxos de trabalho e as ferramentas que você acabou de aprender, clique em Optimize na demonstração para ativar o código otimizado, fazer outra gravação de desempenho e analisar os resultados. Do frame rate melhorado à redução de eventos no gráfico de chamas da seção Main, é possível notar que a versão otimizada do app exige muito menos trabalho, resultando em melhor performance.

Observação:mesmo essa versão otimizada não é tão boa, porque ainda manipula a propriedade top de cada quadrado. Uma abordagem melhor é usar propriedades que afetam apenas a composição. Consulte Usar mudanças de transformação e opacidade para animações para mais informações.

Próximas etapas

A base para entender a performance é o modelo RAIL. Esse modelo ensina as métricas de performance mais importantes para seus usuários. Consulte Medir a performance com o modelo RAIL para saber mais.

Para se sentir mais à vontade com o painel "Performance", pratique. Tente criar perfis das suas próprias páginas e analisar os resultados. Se tiver dúvidas sobre os resultados, abra uma pergunta do Stack Overflow com a tag google-chrome-devtools. Inclua capturas de tela ou links para páginas reproduzíveis, se possível.

Para se tornar um especialista em desempenho de execução, você precisa aprender como o navegador traduz HTML, CSS e JS em pixels na tela. O melhor lugar para começar é a Visão geral da performance de renderização. A anatomia de um frame entra em mais detalhes.

Por fim, há muitas maneiras de melhorar o desempenho do tempo de execução. Este tutorial se concentrou em um gargalo de animação específico para oferecer um tour focado pelo painel "Performance", mas ele é apenas um dos muitos gargalos que você pode encontrar. O restante da série "Rendering Performance" tem muitas dicas úteis para melhorar vários aspectos do desempenho de execução, como:

• Como otimizar a execução de JS
• Reduzir o escopo e a complexidade dos cálculos de estilo
• Evitar layouts grandes e complexos e o uso excessivo de layouts
• Simplificar a complexidade da pintura e reduzir as áreas de pintura
• Usar apenas propriedades do compositor e gerenciar a contagem de camadas
• Debounce seus manipuladores de entrada