Analisar o desempenho do tempo de execução (tutorial)

O desempenho do tempo de execução é o desempenho da página da Web quando está em execução, em vez de carregar. O tutorial a seguir ensina como usar a ferramenta Desempenho do DevTools para analisar o desempenho do tempo de execução.

As habilidades que você aprende neste tutorial são úteis para analisar o carregamento, a interatividade e a estabilidade visual do seu conteúdo da web, que também são indicadores-chave para os Core Web Vitals. Cada um dos Core Web Vitals representa uma faceta distinta da experiência do usuário, é mensurável em campo e reflete a experiência do mundo real de um resultado crítico centrado no usuário. Você pode ver esses Core Web Vitals na ferramenta Desempenho .

Consulte também:

• Web Vitals em web.dev.
• Terminologia na ferramenta Performance: analise o desempenho do seu site.
• Otimize a velocidade do site usando Lighthouse

Etapa 1: abra a demonstração no modo InPrivate e abra o DevTools

No tutorial a seguir, você abre o DevTools na página da Web de demonstração "Animação Lenta" e usa a ferramenta Desempenho para encontrar um gargalo de desempenho na página da Web.

1. Clique com o botão direito do mouse no link Sluggish Animation e selecione Abrir link na janela InPrivate.

   Você criará o perfil desta página da web de demonstração, que mostra um número variável de ícones se movendo para cima e para baixo. Se você quiser exibir o código-fonte da demonstração, consulte MicrosoftEdge / Demos > devtools-performance-get-started.

   O modo InPrivate garante que o navegador seja executado em um estado limpo. Por exemplo, se você tiver muitas extensões instaladas, elas poderão criar ruído nas medições de desempenho. Se você quiser obter mais informações, consulte Navegação InPrivate no Microsoft Edge.

2. Clique com o botão direito do mouse na página da demonstração e selecione Inspecionar.

   O DevTools é aberto:

   

3. No canto superior direito do DevTools, clique no botão Personalizar e controlar o DevTools () e, ao lado do local do Encaixe, clique no botão Desencaixar em janela separada ().

Etapa 2: acelerar a CPU para simular uma CPU móvel

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

Limite a CPU do seu computador desktop para simular uma CPU móvel, da seguinte maneira:

1. No DevTools, abra a ferramenta Desempenho ().

2. Clique no botão Configurações de Captura ().

   O DevTools exibe configurações, menus suspensos e caixas de seleção relacionadas à captura de métricas de desempenho.

3. No menu suspenso de limitação de CPU no canto superior esquerdo, selecione o valor de desaceleração recomendado, como desaceleração 4x - recomendado:

   

   Ou, na seção Configurações de ambiente no canto inferior direito, no menu suspenso de limitação de CPU , selecione o valor de desaceleração recomendado, como desaceleração 4x - recomendado. As duas instâncias do menu suspenso estão vinculadas.

   O fator de limitação recomendado é calculado pelo DevTools, com base no seu computador. Para garantir que uma página da Web funcione bem em dispositivos móveis de nível inferior, selecione uma lentidão maior na lista suspensa de limitação da CPU , como desaceleração 6x.

   O DevTools limita sua CPU para que fique mais lenta do que o normal.

   Um ícone de aviso de limitação () é exibido na guia da ferramenta Desempenho , para lembrá-lo de que a limitação está habilitada.

4. Clique no botão Configurações de Captura ().

   As configurações, menus suspensos e caixas de seleção relacionadas à captura de métricas de desempenho estão ocultos.

Passo 3: Preencha a página da web com um número ideal de ícones

Antes de gravar a apresentação, preencha a página da Web de demonstração com um número ideal de ícones para ajudar a comparar o código não otimizado versus otimizado.

Para criar um par de gravações de desempenho para comparar o código não otimizado versus otimizado, a página da Web de demonstração primeiro precisa exibir um determinado número de ícones em movimento, dependendo da sua máquina. Deve haver ícones suficientes para que você possa ver claramente uma diferença na velocidade e suavidade da animação ao alternar entre selecionar o código não otimizado (Lento) e o código otimizado .

Para preencher a página da Web de demonstração com um número ideal de ícones:

1. Alterne para a página da Web de demonstração de Animação Lenta.

   O botão de opção Lento é selecionado inicialmente, por padrão, para que o código não otimizado seja usado.

2. Clique no botão Adicionar elementos várias vezes, até que os ícones azuis comecem a se mover de forma muito lenta e irregular.

3. Selecione o botão de opção Otimizado .

   Os ícones se movem mais rapidamente e suavemente.

4. Se você não vir uma diferença perceptível entre usar o código não otimizado (Lento) e Otimizado , tente clicar no botão Remover elementos .

   Se houver muitos ícones, isso maximizará a CPU e você não verá uma grande diferença nos resultados para as duas versões do código.

Etapa 4: registrar o desempenho do código não otimizado

Quando você executa a versão otimizada do código da página da Web, os ícones azuis se movem mais rapidamente. Por quê? Ambas as versões do código devem mover os ícones com a mesma quantidade de espaço na mesma quantidade de tempo.

Faça uma gravação na ferramenta Desempenho para saber como detectar o gargalo de desempenho na versão não otimizada (Lenta) do código:

1. Na página da Web de demonstração, selecione o botão de opção Lento .

   Os ícones se movem de forma mais lenta e irregular. O código não otimizado está em execução e será analisado, e há um número ideal de ícones para demonstrar baixo desempenho e ajudar a encontrar o gargalo de desempenho.

2. Na janela DevTools, na ferramenta Desempenho , clique no botão Gravar ().

   O DevTools captura métricas de desempenho à medida que a página da Web é executada:

   

   A CPU ainda está limitada. (Essas capturas de tela devem mostrar o ícone de aviso de limitação () na guia da ferramenta Desempenho na Barra de Atividades.)

3. Aguarde alguns segundos e clique no ícone Parar () ou no botão Parar .

   O DevTools interrompe a gravação, processa os dados e exibe os resultados na ferramenta Desempenho :

   

Esses resultados de desempenho mostram uma quantidade enorme de dados, mas tudo fará mais sentido em breve.

Etapa 5: Analisar o desempenho do código não otimizado

Depois de ter uma gravação do desempenho da página da Web, você pode avaliar o desempenho da página da Web e encontrar a causa de quaisquer problemas de desempenho.

1. Na parte superior da ferramenta Desempenho , examine o gráfico de CPU :

   

   As cores no gráfico de CPU correspondem às cores no painel Resumo , na parte inferior da ferramenta Desempenho . O gráfico de CPU mostra que essas regiões constituem uma área grande, o que significa que a CPU foi maximizada durante a gravação. Sempre que a CPU é maximizada por longos períodos, isso é um indicador de que a página da Web não está funcionando bem.

2. Passe o mouse sobre os gráficos da CPU ou NET :

   

   O DevTools mostra uma captura de tela da página da Web nesse momento.

3. Mova o mouse para a esquerda e para a direita para reproduzir a gravação.

   Essa ação é chamada de depuração e é útil para analisar manualmente a progressão da gravação do desempenho.

Etapa 6: exibir a sobreposição de estatísticas de renderização de quadros

Outra ferramenta útil é a sobreposição Frame Rendering Stats , às vezes chamada de medidor FPS. A sobreposição Estatísticas de renderização de quadros fornece estimativas em tempo real para quadros por segundo (FPS) durante a execução da página da Web. A sobreposição Estatísticas de renderização de quadros não é necessária para este tutorial, mas pode fornecer informações úteis.

1. No canto superior direito do DevTools, clique no botão Personalizar e controlar o DevTools () e selecione Alternar painel de Exibição Rápida.

   Ou pressione Esc uma ou duas vezes.

   O painel Visualização Rápida é exibido na parte inferior do DevTools.

2. Na barra de ferramentas Visualização rápida , clique no botão Mais ferramentas () e selecione Renderização.

   A ferramenta Renderização é aberta no painel Visualização Rápida .

3. Na ferramenta Renderização , marque a caixa de seleção Estatísticas de renderização de quadros :

   

4. Alterne para a página da Web de demonstração.

   A sobreposição Estatísticas de renderização de quadros é exibida:

   

   A sobreposição tem as seguintes seções:

   • Taxa de quadros
   • Raster de GPU
   • Memória da GPU

   Desativar a sobreposição:

5. Alterne para a janela do DevTools.

6. Na ferramenta Renderização , desmarque a caixa de seleção Estatísticas de renderização de quadros .

7. No canto superior direito do DevTools, clique no botão Personalizar e controlar o DevTools () e selecione Alternar painel de Exibição Rápida.

   Ou pressione Esc.

   O painel Visualização rápida está oculto.

Consulte também:

• Ferramenta de renderização, para ver a aparência de uma página da Web com diferentes opções de exibição ou deficiências visuais

Etapa 7: Localizar o gargalo de desempenho

Depois de verificar se a animação não está funcionando bem, a próxima etapa é responder à pergunta "por quê?"

1. Na parte inferior da ferramenta Desempenho , selecione a guia Resumo :

   

   Quando nenhum evento é selecionado, a guia Resumo exibe um detalhamento da atividade. A página da Web passou a maior parte do tempo renderizando. Como o desempenho é a arte de fazer menos trabalho, seu objetivo é reduzir a quantidade de tempo gasto fazendo o trabalho de renderização.

2. Na ferramenta Desempenho , clique na linha Principal para expandi-la.

   O DevTools exibe um gráfico de chamas de atividade no thread 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 demorou mais.

   • O eixo y representa a pilha de chamadas. Quando os eventos são empilhados uns sobre os outros, isso significa que os eventos superiores causaram os eventos inferiores.

   Há muitos dados na gravação.

3. Na área Visão geral abaixo da barra de ferramentas, clique e arraste horizontalmente para ampliar uma parte da gravação:

   

   A área Visão geral inclui os gráficos CPU e NET (indicados à direita).

   A seção Principal (abaixo da Visão geral) e a guia Resumo exibem apenas informações para a parte selecionada da gravação.

   Outra maneira de alterar a área selecionada é colocar o foco na seção principal , clicar no plano de fundo ou em um evento e pressionar:

   • W para ampliar ou S reduzir o zoom.
   • A para mover a seleção para a esquerda ou D para mover a seleção para a direita.

4. Clique em um evento de Quadro de animação disparado .

   Quando um triângulo vermelho é exibido no canto superior direito de um evento, é um aviso de que pode haver um problema relacionado ao evento. O evento Animation Frame Fired ocorre sempre que um retorno de chamada requestAnimationFrame() é executado.

   O painel Resumo exibe informações sobre esse evento:

   

5. Clique no link Revelar .

   O DevTools realça o evento que iniciou o evento Animation Frame Fired .

6. Clique no link app.js:125 .

   A linha relevante do código-fonte é exibida na ferramenta Fontes .

7. Amplie o evento Quadro de animação disparado e seus eventos filho usando a roda do mouse ou o trackpad.

   Ou então, pressione W.

   Agora você pode ver os eventos que ocorrem quando um único quadro da animação é renderizado. A função update é chamada, que, por sua vez, chama a função updateSlow , que dispara muitos eventos Recalculate Style e Layout :

   

8. Clique em um dos eventos de Layout roxo.

   O DevTools fornece mais informações sobre o evento no painel Resumo . Há um aviso sobre "refluxos forçados" (relayout).

9. No painel Resumo , clique no link app.js:104 em Layout Forçado.

   O DevTools leva você à linha de código que forçou o layout na ferramenta Fontes :

   

O problema com o código não otimizado é que, em cada quadro de animação, ele altera o estilo de cada ícone e, em seguida, consulta a posição de cada ícone na página da Web. Como os estilos foram alterados, o navegador não sabe se cada posição do ícone foi alterada, portanto, ele precisa refazer o layout do ícone para calcular a nova posição.

Consulte também:

• Evitar layouts síncronos forçados in Evite layouts grandes e complexos e a sobreposição de layouts em web.dev.

Etapa 8: Registrar o desempenho do código otimizado

Você registrou o desempenho do código não otimizado acima.

Registre o desempenho do código otimizado, da seguinte maneira:

1. Clique em Otimizado na página da Web de demonstração para ativar o código otimizado.

2. Na janela DevTools, na ferramenta Desempenho , clique no botão Gravar ().

   O DevTools captura métricas de desempenho à medida que a página da Web é executada.

3. Aguarde alguns segundos e clique no ícone Parar () ou no botão Parar .

   O DevTools interrompe a gravação, processa os dados e exibe os resultados na ferramenta Desempenho .

Etapa 9: Analisar o desempenho do código otimizado

• Usando os fluxos de trabalho e ferramentas que você acabou de aprender, analise os resultados no desempenho, como na Etapa 5: Analisar o desempenho do código não otimizado, acima.

  Desde a taxa de quadros aprimorada até a redução de eventos no gráfico de chamas na seção principal , a versão otimizada do aplicativo faz muito menos trabalho, resultando em melhor desempenho.

Etapa 10: Analisar o código não otimizado

Compare este trecho de JavaScript da versão não otimizada do aplicativo:

// Read the current position.
const currentPos = element.offsetTop;
// Read the direction.
const direction = element.dataset.dir;
// Calculate the next position.
let nextPos = direction === 'up' ? currentPos - SPEED : currentPos + SPEED;

// If the new position is out of bounds, reset it.
if (nextPos < 0) {
  nextPos = 0;
} else if (nextPos > canvas.offsetHeight) {
  nextPos = canvas.offsetHeight;
}

// Set the new position on the element.
element.style.top = `${nextPos}px`;

// Switch the direction if needed.
if (element.offsetTop === 0) {
  element.dataset.dir = 'down';
} else if (element.offsetTop === canvas.offsetHeight) {
  element.dataset.dir = 'up';
}

O trecho de código acima é executado em cada quadro do loop de renderização do navegador, para cada ícone azul na página da Web. A element variável faz referência a um único ícone azul.

Nesta versão não otimizada, criamos uma nextPos variável que é definida para a posição atual do ícone, à qual adicionamos alguma distância. A posição atual do ícone é lida usando .element.offsetTop

Depois de garantir que o ícone ainda esteja dentro dos limites da página da Web, definimos sua nova posição usando element.style.top, que define estilos embutidos no elemento.

Por fim, lemos element.offsetTop novamente, para ajustar a direção do ícone.

Etapa 11: Analisar o código otimizado

O código otimizado usa uma sequência diferente de ações para fazer menos trabalho. Aqui está o mesmo trecho de JavaScript da versão otimizada do aplicativo:

// Read the current position.
const currentPos = parseFloat(element.style.transform.match(/[0-9.]+/)[0]);
// Read the direction.
const direction = element.dataset.dir;
// Calculate the next position.
let nextPos = direction === 'up' ? currentPos - (SPEED * 100 / canvasHeight) : currentPos + (SPEED * 100 / canvasHeight);

// If the new position is out of bounds, reset it, and switch the direction.
if (nextPos < 0) {
  nextPos = 0;
  element.dataset.dir = 'down';
} else if (nextPos > 100) {
  nextPos = 100;
  element.dataset.dir = 'up';
}

// Set the new position on the element.
element.style.transform = `translateY(${nextPos}vh)`;

Na versão otimizada, primeiro definimos o nextPos valor da variável lendo element.style.transform em vez de usar element.offsetTop. Usar o estilo embutido do elemento é mais rápido, pois a leitura element.offsetTop força o mecanismo do navegador a saber onde todos os elementos estão na página da Web, o que exige que o mecanismo recalcule os estilos e o layout.

Em seguida, ajustamos a direção do ícone, mas desta vez não lemos element.offsetTop novamente como feito na versão não otimizada.

Finalmente, definimos a nova posição do ícone, mas desta vez usamos element.style.transform em vez de element.style.top. O uso element.style.transform é mais rápido, pois a propriedade CSS transform pode ser aplicada pelo mecanismo de renderização do navegador sem precisar recalcular o layout da página da Web. Ao usar a propriedade, o transform navegador considera cada ícone como uma camada individual e, em seguida, exibe essas camadas nas posições corretas recompondo a imagem final.

Consulte também:

• Evite propriedades que acionem o layout ou a pintura in Como criar animações CSS de alto desempenho no web.dev.
• Transição de opacidade em opacidade no MDN.

Etapa 12: redefinir as configurações do DevTools

1. Alterne para a janela do DevTools desencaixada.

2. Na ferramenta Desempenho, clique no botão Configurações de Captura ().

   O DevTools exibe configurações, menus suspensos e caixas de seleção relacionadas à captura de métricas de desempenho.

3. No menu suspenso de limitação de CPU no canto superior esquerdo, selecione Sem limitação.

   O DevTools interrompe a limitação da CPU. O ícone de aviso é removido da guia da ferramenta Desempenho .

4. No canto superior direito do DevTools, clique no botão Personalizar e controlar o DevTools () e, ao lado do Local do encaixe, clique no botão Encaixar para a direita ().

Próximas etapas

Para se familiarizar com a ferramenta Desempenho , pratique a criação de perfil de suas páginas da Web e analise os resultados.

Se você tiver alguma dúvida sobre seus resultados, na Barra de Atividades, selecione Ajuda () >Comentários. Ou pressione Alt+Shift+I (Windows, Linux) ou Option+Shift+I (macOS).

Ou registre um problema no repositório MicrosoftEdge / DevTools.

Em seus comentários, inclua capturas de tela ou links para páginas da Web reproduzíveis, se possível.

Há muitas maneiras de melhorar o desempenho do tempo de execução. Este artigo se concentrou em um gargalo de animação específico para fornecer um tour focado na ferramenta Desempenho , mas é apenas um dos muitos gargalos que você pode encontrar.

Este trabalho está licenciado sob uma Licença Creative Commons Atribuição 4.0 Internacional.