Analisar o desempenho do ambiente de execução

Kayce Basques

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 Performance do Chrome DevTools para analisar o desempenho do ambiente de execução. Em termos de modelo RAIL, as habilidades aprendidas neste tutorial são úteis para analisar as fases de resposta, animação e inatividade da página.

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 analisar. A página mostra vários quadrados azuis pequenos se movendo para cima e para baixo.

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

3. Pressione Command+Option+I (Mac) ou Control+Shift+I (Windows, Linux) para abrir o DevTools.

   

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. No DevTools, clique na guia Performance.
2. Verifique se a caixa de seleção Capturas de tela check_box está marcada.
3. Clique em Configurações de captura Configurações. O DevTools mostra as configurações relacionadas à captura de métricas de desempenho.

4. Em CPU, selecione 4x lentidão. O DevTools limita sua CPU para que ela fique quatro vezes mais lenta do que o normal.

   

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 Add 10 (Adicionar 10) até que os quadrados azuis se movam visivelmente mais lentamente 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.

3. Clique em Cancelar otimização. Os quadrados azuis se movem mais lentamente e com mais instabilidade novamente.

Gravar o desempenho da 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 Gravar radio_button_checked. O DevTools captura métricas de desempenho à medida que a página é executada.

   

2. Aguarde alguns segundos.

3. Clique em Interromper. O DevTools interrompe a gravação, processa os dados e exibe 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 avaliar o desempenho de qualquer animação é o quadro por segundo (QPS). Os usuários ficam satisfeitos 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 atingir o limite por longos períodos, é importante encontrar formas de realizar menos trabalho.

   

3. Passe o cursor sobre os gráficos FPS, 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. O DevTools mostra o 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 durante a execução da página.

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 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. Ele não será usado 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 das atividades. A página passou a maior parte do tempo sendo renderizada. Como a performance é a arte de fazer menos trabalho, seu objetivo é reduzir o tempo gasto na renderização.

   

2. Expanda a seção Principal. O DevTools mostra 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 você vê eventos empilhados, significa que os eventos superiores causaram os eventos inferiores.

   

3. Há muitos dados na gravação. Aumente o zoom em um único evento Animation Frame Fired clicando, pressionando 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 da parte selecionada da gravação.

   

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.

   

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. O DevTools fornece 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 Primeira invalidação de layout. O DevTools leva você à linha de código que forçou o layout.

   

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: analise 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 desempenho.

Próximas etapas

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

Para se sentir mais à vontade com o painel "Performance", pratique. Crie perfis das suas próprias páginas e analise 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 especialista em desempenho de execução, você precisa aprender como o navegador converte HTML, CSS e JS em pixels na tela. O melhor lugar para começar é a Visão geral do desempenho 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 troca frequente de layouts
• Simplificar a complexidade da pintura e reduzir áreas de pintura
• Usar apenas propriedades do compositor e gerenciar o número de camadas
• Retarde os gerenciadores de entrada