Analisar o desempenho do runtime (tutorial)

O desempenho do runtime é o desempenho da página Web quando está em execução, em vez de carregar. O tutorial seguinte ensina-o a utilizar a ferramenta DevTools Performance para analisar o desempenho do runtime.

As competências que aprende neste tutorial são úteis para analisar o carregamento, a interatividade e a estabilidade visual dos seus conteúdos Web, que também são indicadores-chave para Os Principais Vitais da Web. Cada Um dos Principais Vitais da Web representa uma faceta distinta da experiência do utilizador, é mensurável no campo e reflete a experiência do mundo real de um resultado crítico centrado no utilizador. Pode ver estes Núcleos Vitais da Web na ferramenta Desempenho .

Consulte também:

• Sinais Vitais da Web em web.dev.
• Terminologia na Ferramenta de desempenho: analise o desempenho do seu site.
• Otimize a velocidade do site usando Lighthouse

Passo 1: abrir a demonstração no modo InPrivate e abrir DevTools

No tutorial seguinte, vai abrir o DevTools na página Web de demonstração "Animação Lenta" e utilizar a ferramenta Desempenho para encontrar um estrangulamento de desempenho na página Web.

1. Clique com o botão direito do rato na ligação Animação Lenta e, em seguida, selecione Abrir ligação na janela InPrivate.

   Irá criar o perfil desta página Web de demonstração, que mostra um número variável de ícones a mover para cima e para baixo. Se quiser ver o código fonte da demonstração, consulte MicrosoftEdge/Demos > devtools-performance-get-started.

   O modo InPrivate garante que o browser é executado num estado limpo. Por exemplo, se tiver muitas extensões instaladas, essas extensões poderão criar dados irrelevantes nas suas medições de desempenho. Se quiser obter mais informações, consulte Procurar InPrivate no Microsoft Edge.

2. Clique com o botão direito do rato na página Web de demonstração e, em seguida, selecione Inspecionar.

   O DevTools é aberto:

   

3. No canto superior direito de DevTools, clique no botão Personalizar e controlar DevTools ( e, em seguida, junto à localização da Dock, clique no botão Desancorar numa janela separada ().

Passo 2: Limitar a CPU para simular uma CPU móvel

Os dispositivos móveis têm muito menos poder de CPU do que computadores de secretária e portáteis. Sempre que criar perfis para uma página Web, utilize a limitação da CPU para simular o desempenho da sua página Web em dispositivos móveis.

Limitar a CPU do computador de secretária para simular uma CPU móvel, da seguinte forma:

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

2. Clique no botão Definições de captura ().

   O DevTools apresenta as definições de menus pendentes e caixas de verificação relacionadas com a captura de métricas de desempenho.

3. No menu pendente limitação da CPU no canto superior esquerdo, selecione o valor de abrandamento recomendado, tal como 4x abrandamento - recomendado:

   

   Em alternativa, na secção Definições do ambiente no canto inferior direito, no menu pendente limitação da CPU , selecione o valor de abrandamento recomendado, como 4x abrandamento - recomendado. As duas instâncias do menu pendente estão ligadas.

   O fator de limitação recomendado é calculado pela DevTools, com base no seu computador. Para garantir que uma página Web funciona bem em dispositivos móveis de gama inferior, selecione um maior abrandamento na lista pendente de limitação da CPU , como 6x de abrandamento.

   O DevTools limita a CPU para que seja mais lenta do que o habitual.

   Um ícone de aviso de limitação ( de limitação) é apresentado no separador da ferramenta Desempenho , para lembrá-lo de que a limitação está ativada.

4. Clique no botão Definições de captura ().

   As caixas de verificação e os menus pendentes de definições relacionados com a captura de métricas de desempenho estão ocultos.

Passo 3: preencher a página Web com um número ideal de ícones

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

Para criar um par de gravações de desempenho para comparar o código não otimizado vs. otimizado, a página Web de demonstração tem primeiro de apresentar um determinado número de ícones em movimento, consoante o seu computador. Devem existir ícones suficientes para que possa ver claramente uma diferença na velocidade e na suavidade da animação quando alterna entre selecionar o código não otimizado (Lento) e o código Otimizado .

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

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

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

2. Clique no botão Adicionar elementos várias vezes, até os ícones azuis começarem a mover-se muito lentamente e de forma errática.

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

   Os ícones movem-se de forma mais rápida e suave.

4. Se não vir uma diferença notável entre utilizar o código não otimizado (Lento) e Otimizado , experimente clicar no botão Remover elementos .

   Se existirem demasiados ícones, isso atingirá o limite máximo da CPU e não verá uma grande diferença nos resultados das duas versões do código.

Passo 4: Registar o desempenho do código não otimizado

Quando executa a versão otimizada do código da página Web, os ícones azuis são movidos mais rapidamente. Por quê? Ambas as versões do código devem mover os ícones da mesma quantidade de espaço no mesmo período de tempo.

Utilize uma gravação na ferramenta Desempenho para saber como detetar o estrangulamento de desempenho na versão não otimizada (Lenta) do código:

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

   Os ícones movem-se de forma mais lenta e errática. O código não otimizado está em execução e será criados perfis e existe um número ideal de ícones para demonstrar um fraco desempenho e ajudar a encontrar o estrangulamento de desempenho.

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

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

   

   A CPU ainda está limitada. (Estas capturas de ecrã devem mostrar o ícone de aviso de limitação ( de limitação) no separador Ferramenta de desempenho na Barra de Atividade.)

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

   As DevTools param de gravar, processam os dados e, em seguida, apresentam os resultados na ferramenta Desempenho :

   

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

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

Assim que tiver uma gravação do desempenho da página Web, pode avaliar o desempenho da página Web e encontrar a causa de quaisquer problemas de desempenho.

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

   

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

2. Paire o cursor sobre os gráficos DE CPU ou NET :

   

   DevTools mostra uma captura de ecrã da página Web nesse momento.

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

   Esta ação chama-se limpeza e é útil para analisar manualmente a progressão da gravação de desempenho.

Passo 6: Apresentar a sobreposição de Estatísticas de Composição de Molduras

Outra ferramenta útil é a sobreposição de Estatísticas de Composição de Molduras , por vezes denominada medidor FPS. A sobreposição de Estatísticas de Composição de Molduras fornece estimativas em tempo real para fotogramas por segundo (FPS) enquanto a página Web é executada. A sobreposição de Estatísticas de Composição de Molduras não é necessária para este tutorial, mas pode fornecer informações úteis.

1. No canto superior direito de DevTools, clique no botão Personalizar e controlar DevTools () e, em seguida, selecione Ativar/Desativar painel Vista Rápida.

   Em alternativa, prima Esc uma ou duas vezes.

   O painel Vista Rápida é apresentado na parte inferior de DevTools.

2. Na barra de ferramentas Vista Rápida , clique no botão Mais ferramentas () e, em seguida, selecione Composição.

   A ferramenta de Composição é aberta no painel Vista Rápida .

3. Na ferramenta Composição , selecione a caixa de verificação Estatísticas de Composição de Molduras :

   

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

   É apresentada a sobreposição das Estatísticas de Composição de Molduras:

   

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

   • Taxa de Fotogramas
   • Raster gpu
   • Memória da GPU

   Desative a sobreposição:

5. Mude para a janela DevTools.

6. Na ferramenta Composição , desmarque a caixa de verificação Estatísticas de Composição de Molduras .

7. No canto superior direito de DevTools, clique no botão Personalizar e controlar DevTools () e, em seguida, selecione Ativar/Desativar painel Vista Rápida.

   Em alternativa, prima Esc.

   O painel Vista 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

Passo 7: Encontrar o estrangulamento de desempenho

Depois de verificar que a animação não está a ter um bom desempenho, o próximo passo é responder à pergunta "porquê?"

1. Na parte inferior da ferramenta Desempenho , selecione o separador Resumo :

   

   Quando não são selecionados eventos, o separador Resumo apresenta uma discriminação da atividade. A página Web passou a maior parte do tempo a compor. Uma vez que o desempenho é a arte de fazer menos trabalho, o seu objetivo é reduzir a quantidade de tempo despendido a fazer trabalho de composição.

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

   O DevTools apresenta um gráfico de chama 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 tempo.

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

   Existem muitos dados na gravação.

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

   

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

   A secção Principal (abaixo da Descrição Geral) e o separador Resumo só apresentam informações para a parte selecionada da gravação.

   Outra forma de alterar a área selecionada é colocar o foco na secção Principal , clicar no fundo ou num evento e, em seguida, premir:

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

4. Clique num evento Acionado por Moldura de Animação .

   Quando um triângulo vermelho é apresentado no canto superior direito de um evento, é um aviso de que pode existir um problema relacionado com o evento. O evento Frame de Animação Acionado ocorre sempre que é executada uma chamada de retorno requestAnimationFrame( ).

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

   

5. Clique na ligação Revelar .

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

6. Clique na ligação app.js:125 .

   A linha de código fonte relevante é apresentada na ferramenta Origens .

7. Amplie o evento Fotograma de Animação Acionado e os respetivos eventos subordinados com a roda do rato ou o trackpad.

   Em alternativa, prima W.

   Agora pode ver os eventos que ocorrem quando um único fotograma da animação é composto. A função update é chamada, que, por sua vez, chama a função updateSlow , que aciona muitos eventos Recalcular Estilo e Esquema :

   

8. Clique num dos eventos de Esquema roxo.

   O DevTools fornece mais informações sobre o evento no painel Resumo . Existe um aviso sobre os "fluxos forçados" (reescritar).

9. No painel Resumo , clique na ligação app.js:104 em Esquema Forçado.

   O DevTools direciona-o para a linha de código que forçou o esquema na ferramenta Origens :

   

O problema com o código não otimizado é que, em cada moldura de animação, altera o estilo de cada ícone e, em seguida, consulta a posição de cada ícone na página Web. Uma vez que os estilos mudaram, o browser não sabe se cada posição do ícone foi alterada, pelo que tem de voltar a esquematar o ícone para calcular a nova posição.

Consulte também:

• Evitar esquemas síncronos forçados em Evite esquemas grandes e complexos e desvaindo a web.dev.

Passo 8: Registar o desempenho do código otimizado

Registou o desempenho de código não otimizado acima.

Registe o desempenho do código otimizado, da seguinte forma:

1. Clique em Otimizado na página 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 as métricas de desempenho à medida que a página Web é executada.

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

   As DevTools param de gravar, processam os dados e, em seguida, apresentam os resultados na ferramenta Desempenho .

Passo 9: Analisar o desempenho do código otimizado

• Com os fluxos de trabalho e as ferramentas que acabou de aprender, analise os resultados no desempenho, como no Passo 5: Analisar o desempenho do código não otimizado acima.

  Desde a melhoria da framerate até à redução de eventos no gráfico de chama na secção Principal , a versão otimizada da aplicação faz muito menos trabalho, resultando num melhor desempenho.

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

Compare este fragmento de JavaScript da versão não otimizada da aplicação:

// 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 fragmento de código acima é executado em cada frame do ciclo de composição do browser, para cada ícone azul na página Web. A element variável referencia um único ícone azul.

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

Depois de garantir que o ícone ainda está dentro dos limites da página Web, definimos a nova posição ao utilizar element.style.top, que define estilos inline no elemento.

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

Passo 11: Analisar o código otimizado

O código otimizado utiliza uma sequência diferente de ações para fazer menos trabalho. Eis o mesmo fragmento de JavaScript da versão otimizada da aplicação:

// 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, definimos primeiro o valor da nextPos variável ao ler element.style.transform em vez de utilizar element.offsetTop. Utilizar o estilo inline do elemento é mais rápido, porque a leitura element.offsetTop força o motor do browser a saber onde estão todos os elementos na página Web, o que requer que o motor recalcule os estilos e o esquema.

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

Por fim, definimos a nova posição do ícone, mas desta vez utilizamos element.style.transform em vez de element.style.top. A utilização element.style.transform é mais rápida porque a propriedade CSS transform pode ser aplicada pelo motor de composição do browser sem ter de recalcular o esquema da página Web. Ao utilizar a transform propriedade , o browser considera cada ícone como uma camada individual e, em seguida, apresenta estas camadas nas posições corretas ao reposicionar a imagem final.

Consulte também:

• Evitar propriedades que acionam o esquema ou o paint em Como criar animações CSS de alto desempenho no web.dev.
• Transição da opacidade na opacidade na MDN.

Passo 12: Repor as definições de DevTools

1. Mude para a janela DevTools desancorada.

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

   O DevTools apresenta as definições de menus pendentes e caixas de verificação relacionadas com a captura de métricas de desempenho.

3. No menu pendente Limitação da CPU no canto superior esquerdo, selecione Sem limitação.

   As DevTools param de limitar a CPU. O ícone de aviso é removido do separador Ferramenta de desempenho .

4. No canto superior direito de DevTools, clique no botão Personalizar e controlar As DevTools ( e, em seguida, junto à localização da Dock, clique no botão Ancorar para a direita ().

Próximas etapas

Para se sentir mais confortável com a ferramenta Desempenho , pratique a criação de perfis das suas páginas Web e a análise dos resultados.

Se tiver dúvidas sobre os resultados, na Barra de Atividade, selecione Ajuda () >Feedback. Em alternativa, prima Alt+Shift+I (Windows, Linux) ou Opção+Shift+I (macOS).

Em alternativa, submeta um problema no repositório MicrosoftEdge/DevTools.

No seu feedback, inclua capturas de ecrã ou ligações para páginas Web reproduzíveis, se possível.

Existem várias formas de melhorar o desempenho do runtime. Este artigo focou-se num estrangulamento de animação específico para lhe dar uma apresentação focada da ferramenta Desempenho , mas é apenas um dos muitos estrangulamentos que poderá encontrar.

Observação

Partes desta página são modificações baseadas no trabalho criado e compartilhado pelo Google e usadas de acordo com os termos descritos na Licença Pública Creative Commons Atribuição 4.0 Internacional. A página original é encontrada aqui e é da autoria de Kayce Bascos.

Este trabalho é licenciado ao abrigo de uma Licença Internacional creative Commons Attribution 4.0.