Share via

Introdução à ferramenta Desempenho

  • Artigo

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

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

Consulte também:

Introdução

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

  1. Abra a página de demonstração animação lenta na guia ou janela InPrivate. Para fazer isso, clique com o botão direito do mouse no link e selecione Abrir link na janela InPrivate. Você fará o perfil desta página, que mostra um número variável de ícones subindo e descendo. Para obter mais informações sobre o InPrivate, consulte Procurar InPrivate no Microsoft Edge

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

  2. Pressione Ctrl+Shift+I (Windows, Linux) ou Command+Option+I (macOS) para abrir o DevTools:

    A demonstração à esquerda e DevTools à direita

Para o restante das capturas de tela, DevTools é mostrado desencaixado em uma janela separada.

Simular uma CPU móvel

Os dispositivos móveis têm muito menos energia de CPU do que desktops e laptops. Sempre que você perfilar uma página, use 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 Configurações de captura (Configurações de captura). O DevTools revela configurações relacionadas à forma como captura métricas de desempenho.

  3. Para CPU, selecione 4x de lentidão. O DevTools limita sua CPU para que ela seja quatro vezes mais lenta do que o normal.

    Aceleração da CPU

    Se você quiser garantir que as páginas funcionem bem em dispositivos móveis de baixo nível, defina a CPU como uma desaceleração de 6x.

Configurar a demonstração

A seção a seguir permite personalizar a demonstração para garantir que sua experiência seja relativamente consistente com as capturas de tela e descrições.

  1. Clique no botão Adicionar elementos até que os ícones azuis se movam visivelmente mais lentos do que antes. Em um computador high-end, você pode clicar nele cerca de 20 vezes.

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

  3. Para exibir 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 você adicionar muitos ícones azuis, poderá maximizar a CPU e talvez não observe uma grande diferença nos resultados das duas versões.

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

Desempenho de tempo de execução de registro

Quando você executou a versão otimizada da página, os ícones azuis se movem mais rapidamente. Por quê? Ambas as versões devem mover os ícones 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.

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

    Perfil da página

  2. Aguarde alguns segundos.

  3. Clique em Parar. DevTools interrompe a gravação, processa os dados e exibe os resultados na ferramenta Desempenho .

    Os resultados do perfil

Esses resultados de desempenho mostram uma quantidade esmagadora de dados, mas todos farão mais sentido em breve.

Analisar os resultados

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

  1. O gráfico da CPU é exibido na parte superior. As cores no gráfico de CPU correspondem às cores no painel Resumo , na parte inferior da ferramenta Desempenho . O gráfico da CPU mostra que essas regiões compõem uma área grande, o que significa que a CPU foi maximizada durante a gravação. Sempre que a CPU é limitada por longos períodos, esse é um indicador de que a página não está tendo um bom desempenho.

    O gráfico da CPU e o painel Resumo

  2. Passe o mouse sobre os gráficos de CPU ou NET . DevTools mostra uma captura de tela da página nesse momento. Mova o mouse para a esquerda e para a direita para reproduzir a gravação. A ação é chamada de limpeza e é útil para analisar manualmente a progressão da gravação de desempenho.

    Passar o mouse em um quadro

Bônus: Abra a sobreposição estatísticas de renderização de quadro

Outra ferramenta útil é a sobreposição Estatísticas de Renderização de Quadro , que fornece estimativas em tempo real para FPS à medida que a página é executada. A sobreposição estatísticas de renderização de quadro não é necessária para este tutorial, mas pode fornecer insights úteis.

  1. Em DevTools, pressione Ctrl+Shift+P (Windows, Linux) ou Command+Shift+P (macOS) para abrir o Menu de Comando.

  2. Comece a digitar Rendering no Menu de Comando e clique em Mostrar Renderização.

  3. Na ferramenta Renderização , ative estatísticas de renderização de quadro. Uma nova sobreposição aparece na parte superior esquerda da página da Web.

    A sobreposição fps

  4. Quando terminar de examinar os dados FPS, desmarque a caixa de seleção Estatísticas de Renderização de Quadro para ocultar a sobreposição.

Localizar o gargalo

Depois que você verificou que a animação não está tendo um bom desempenho, a próxima etapa é responder à pergunta "por quê?"

  1. Quando nenhum evento é selecionado, o painel Resumo mostra uma divisão da atividade. A página passou a maior parte do tempo renderizando. Como o desempenho é a arte de fazer menos trabalho, seu objetivo é reduzir o tempo gasto fazendo o trabalho de renderização.

    O painel Resumo

  2. Expanda a seção Principal . DevTools mostra um gráfico de chamas da 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 ampla 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.

    A seção Principal

  3. Há muitos dados na gravação. Para ampliar uma parte da gravação, clique e arraste na área visão geral em direção à parte superior da ferramenta Performance . A área visão geral inclui os gráficos CPU e NET (indicados à direita). A seção Principal e o painel Resumo exibem apenas informações para a parte selecionada da gravação.

    Ampliar em uma seção

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

    • W para ampliar, S para ampliar o zoom.
    • A para mover a seleção para a esquerda, 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:

    Mais informações sobre o evento Animation Frame Fired

  5. Clique no link Revelar . DevTools destaca 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 zoom no evento Animation Frame Fired e seus eventos filho, usando a roda do mouse ou o trackpad. Ou pressione W.

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

    O evento Animation Frame Fired e seus eventos filho

  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 "fluxos forçados" (novo layout).

  9. No painel Resumo , clique no link app.js:104 em Layout Forçado. DevTools leva você para a linha de código que forçou o layout na ferramenta Fontes :

    A linha de código que causou o layout forçado

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

Analisar a versão otimizada

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

Versão não otimizada

Compare este snippet do 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 snippet de código acima é executado em cada quadro do loop de renderização do navegador, para cada ícone azul na página. A element variável faz referência a um único ícone azul.

Nesta versão não otimizada, criamos uma nextPos variável definida como 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, 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.

Versão otimizada

O código otimizado usa uma sequência diferente de ações para fazer menos trabalho. Aqui está o mesmo snippet do 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 valor da nextPos 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, o que exige que o mecanismo recalcula 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.

Por fim, 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. Ao usar a transform propriedade, o navegador considera cada ícone como uma camada individual e exibe essas camadas nas posições corretas compondo novamente a imagem final.

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

Próximas etapas

Para ficar mais confortável com a ferramenta Desempenho , pratique a criação de perfil de suas páginas e a análise dos resultados.

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

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

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

Há muitas maneiras de melhorar o desempenho do runtime. Este artigo se concentrou em um gargalo de animação específico para lhe dar um tour focado da ferramenta Performance , mas é apenas um dos muitos gargalos que você pode 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 é de autoria de Kayce Basques (Technical Writer, Chrome DevTools & Lighthouse).

Licença Creative Commons Este trabalho é licenciado sob uma Licença Internacional de Atribuição do Creative Commons 4.0.