Introdução à Ferramenta de desempenho

O desempenho do runtime é o desempenho da sua página 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:

• Otimize a velocidade do site usando Lighthouse

Introdução

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

1. Abra a página de demonstração Animação Lenta no separador ou janela InPrivate. Para tal, clique com o botão direito do rato na ligação e, em seguida, selecione Abrir ligação na janela InPrivate. Irá criar um perfil para esta página, que mostra um número variável de ícones a mover para cima e para baixo. Para obter mais informações sobre InPrivate, consulte Browse InPrivate in Microsoft Edge (Procurar InPrivate no Microsoft Edge)

   Código fonte: MicrosoftEdge/Demos > devtools-performance-get-started.

2. Prima Ctrl+Shift+I (Windows, Linux) ou Comando+Opção+I (macOS) para abrir DevTools:

   

Para o resto das capturas de ecrã, as DevTools são apresentadas desancoradas numa janela separada.

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, utilize a Limitação da CPU para simular o desempenho da sua página em dispositivos móveis.

1. Em DevTools, abra a ferramenta Desempenho .

2. Clique em Definições de captura (). O DevTools revela definições relacionadas com a forma como captura as métricas de desempenho.

3. Para CPU, selecione 4x abrandamento. O DevTools limita a CPU para que seja 4 vezes mais lenta do que o habitual.

   

   Se quiser garantir que as páginas funcionam bem em dispositivos móveis de gama baixa, defina a CPU como 6x de abrandamento.

Configurar a demonstração

A secção seguinte permite-lhe personalizar a demonstração para garantir que a sua experiência é relativamente consistente com as capturas de ecrã e descrições.

1. Clique no botão Adicionar elementos até os ícones azuis se moverem visivelmente mais lentamente do que antes. Num computador topo de gama, pode clicar no mesmo cerca de 20 vezes.

2. Clique em Otimizado. Os ícones azuis devem mover-se de forma mais rápida e suave.

3. Para apresentar melhor uma diferença entre as versões otimizadas e não otimizadas, clique no botão Remover elementos algumas vezes e tente novamente. Se adicionar demasiados ícones azuis, pode atingir o limite máximo da CPU e, em seguida, poderá não observar uma grande diferença nos resultados das duas versões.

4. Clique em Lento. Os ícones azuis movem-se mais lentamente e com mais lentidão novamente.

Desempenho do runtime de registos

Quando executou a versão otimizada da página, os ícones azuis são movidos mais rapidamente. Por quê? Ambas as versões devem mover os ícones da mesma quantidade de espaço no mesmo período de tempo. Faça uma gravação na ferramenta Desempenho para saber como detetar o estrangulamento de desempenho na versão não otimizada.

1. Em DevTools, clique em Gravar (). O DevTools captura as métricas de desempenho à medida que a página é executada.

   

2. Aguarde alguns segundos.

3. Clique em 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.

Analisar os resultados

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

1. O gráfico da CPU é apresentado na parte superior. 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, é um indicador de que a página 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 nessa altura. Mova o rato para a esquerda e para a direita para reproduzir a gravação. A ação chama-se limpeza e é útil para analisar manualmente a progressão da gravação de desempenho.

   

Bónus: Abra 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 , que fornece estimativas em tempo real para FPS à medida que a página é 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. Em DevTools, prima Ctrl+Shift+P (Windows, Linux) ou Comando+Shift+P (macOS) para abrir o Menu de Comandos.

2. Comece a Rendering escrever no Menu de Comandos e clique em Mostrar Composição.

3. Na ferramenta Composição , ative Estatísticas de Composição de Molduras. É apresentada uma nova sobreposição no canto superior esquerdo da sua página Web.

   

4. Quando terminar de rever os dados FPS, desmarque a caixa de verificação Estatísticas de Composição de Molduras para ocultar a sobreposição.

Localizar o estrangulamento

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

1. Quando não são selecionados eventos, o painel Resumo mostra-lhe uma discriminação da atividade. A página 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. Expanda a secção Principal . O DevTools mostra-lhe um gráfico de chama de atividade no thread main, 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.

   

3. Existem muitos dados na gravação. Para ampliar uma parte da gravação, clique e arraste na área Descrição geral em direção à parte superior da ferramenta Desempenho . A área Descrição geral inclui os gráficos CPU e NET (indicados à direita). A secção Principal e o painel 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, S para reduzir.
   • A para mover a seleção para a esquerda, 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. 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.

Analisar a versão otimizada

Com os fluxos de trabalho e as ferramentas que acabou de aprender, clique em Otimizado na página Web de demonstração para ativar o código otimizado, fazer outra gravação de desempenho e, em seguida, analisar os resultados. 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.

Versão não otimizada

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. 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, 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.

Versão otimizada

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, 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. 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.

Para saber mais, consulte Utilizar alterações de transformação e opacidade para animações.

Próximas etapas

Para se sentir mais confortável com a ferramenta Desempenho , pratique a criação de perfis das suas páginas 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 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.