Referência de funcionalidades de desempenho

Esta página é uma referência abrangente das funcionalidades de DevTools que estão relacionadas com a análise do desempenho.

Para obter um tutorial passo a passo sobre como analisar o desempenho de uma página com a ferramenta Desempenho , veja Analisar o desempenho do runtime (tutorial).

As imagens nesta página mostram As DevTools desancoradas na sua própria janela dedicada. Para saber mais sobre como desancorar As DevTools, consulte DevTools desancorar numa janela separada em Alterar colocação de DevTools (Desancorar, Ancorar para baixo, Ancorar para a esquerda).

Conteúdo detalhado:

• Abrir a ferramenta Desempenho
• Desempenho dos registos
  • Desempenho do runtime de registos
  • Registar o desempenho da carga
  • Capturar capturas de ecrã durante a gravação
  • Forçar a libertação da memória durante a gravação
  • Mostrar definições de gravação
  • Desativar exemplos de JavaScript
  • Limitar a rede durante a gravação
  • Limitar a CPU durante a gravação
  • Ativar estatísticas do seletor CSS
  • Ativar a instrumentação avançada do paint
• Anotar uma gravação e partilhá-la
  • Guardar e partilhar uma gravação
  • Carregar uma gravação
• Limpar a gravação anterior
• Analisar uma gravação de desempenho
  • Obter informações acionáveis
  • Navegar na gravação
    • Utilizar atalhos de teclado para navegar
    • Selecionar uma parte de uma gravação
    • Ampliar partes de uma gravação e alternar entre níveis de zoom
    • Deslocar um gráfico de chama longo
  • Atividades de pesquisa
  • Alterar a ordem das faixas e ocultá-las
  • Ver main atividade de thread
  • Ler o gráfico de chama
  • Controlar iniciadores de eventos
  • Ocultar funções e os respetivos filhos no gráfico de chama
    • Ignorar scripts no gráfico de chama
  • Ver atividades numa tabela
    • Atividades de raiz
    • O separador Inferior para Cima
    • O separador Árvore de chamadas
    • O separador Registo de eventos
  • Ver marcadores de desempenho
  • Ver temporizações personalizadas
  • Ver interações
  • Ver turnos de esquema
  • Ver animações
  • Ver atividade da GPU
  • Ver atividade raster
  • Analisar frames por segundo (FPS)
    • A secção Frames
  • Ver pedidos de rede
  • Ver métricas de memória
  • Ver a duração de uma parte de uma gravação
  • Ver uma captura de ecrã
  • Ver informações de camadas
  • Ver o gerador de perfis de pintura
  • Ver estatísticas do seletor CSS
  • Ver mensagens entre janelas, iframes e trabalhadores dedicados
• Analisar o desempenho da composição com a ferramenta de Composição
  • Ver fotogramas por segundo em tempo real com o medidor FPS
  • Ver eventos de pintura em tempo real com o Paint Flashing
  • Ver uma sobreposição de camadas com Limites de Camada
  • Encontrar problemas de desempenho de deslocamento em tempo real
  • Desativar tipos de letra locais
• Visualizar fugas de memória (Ferramenta de desempenho: caixa de verificação Memória)

Abrir a ferramenta Desempenho

Para utilizar as secções nesta página, abra a Ferramenta de desempenho em DevTools:

1. Para abrir o DevTools, clique com o botão direito do rato na página Web e, em seguida, selecione Inspecionar. Em alternativa, prima Ctrl+Shift+I (Windows, Linux) ou Comando+Opção+I (macOS). O DevTools é aberto.

2. Em DevTools, na Barra de Atividade, selecione o separador Desempenho . Se esse separador não estiver visível, clique no botão Mais ferramentas ().

Desempenho dos registos

As secções abaixo descrevem como registar o desempenho de uma página Web no DevTools.

Desempenho do runtime de registos

Para analisar o desempenho de uma página Web enquanto está em execução (em vez de enquanto está a carregar):

1. Aceda à página Web que pretende analisar, como a demonstração da Galeria de Fotografias.

2. Em DevTools, abra a ferramenta Desempenho .

3. Clique no botão Gravar ().

   

4. Interaja com a página durante algum tempo. O DevTools regista toda a atividade da página que ocorre como resultado das suas interações.

5. Clique novamente em Gravar . Em alternativa, clique em Parar para parar a gravação.

   A ferramenta Desempenho apresenta a gravação.

Registar o desempenho da carga

Para analisar o desempenho de uma página Web enquanto está a carregar (em vez de enquanto está em execução):

1. Aceda à página Web que pretende analisar, como a demonstração da Galeria de Fotografias.

2. Em DevTools, abra a ferramenta Desempenho .

3. Clique no botão Atualizar página ():

   

   O DevTools regista as métricas de desempenho enquanto a página é atualizada e, em seguida, para automaticamente a gravação alguns segundos após a conclusão da carga. Em seguida, o DevTools apresenta a gravação e amplia automaticamente a parte da gravação onde ocorreu a maior parte da atividade:

   

Capturar capturas de ecrã durante a gravação

Para capturar uma captura de ecrã de cada fotograma durante a gravação, selecione a caixa de verificação Capturas de ecrã:

Para saber como interagir com capturas de ecrã, consulte Ver uma captura de ecrã abaixo.

Forçar a libertação da memória durante a gravação

Para forçar a libertação da memória enquanto estiver a gravar uma página, clique no botão Recolher lixo ():

Mostrar definições de gravação

Para expor mais definições relacionadas com a forma como o DevTools captura gravações de desempenho, na ferramenta Desempenho , clique no botão Definições de captura (). As caixas de verificação e as listas pendentes são apresentadas na parte superior da ferramenta Desempenho :

Desativar exemplos de JavaScript

Por predefinição, a secção Principal de uma gravação apresenta pilhas de chamadas detalhadas de funções JavaScript que foram chamadas durante a gravação. Para desativar as pilhas de chamadas JavaScript:

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

2. Selecione a caixa de verificação Desativar exemplos de JavaScript .

3. Faça uma gravação da página.

As duas figuras seguintes mostram a diferença entre desativar e ativar exemplos de JavaScript. A secção Principal da gravação é muito mais curta quando a amostragem JavaScript está desativada, porque a gravação omite as pilhas de chamadas JavaScript.

Um exemplo de uma gravação quando os exemplos de JS são desativados:

Um exemplo de uma gravação quando os exemplos de JS estão ativados:

Limitar a rede durante a gravação

Para limitar a rede durante a gravação:

1. Na ferramenta Desempenho , clique no botão Definições de captura (). Consulte Mostrar definições de gravação acima.

2. Defina Rede para o nível de limitação pretendido.

   É apresentado um ícone de aviso no separador Ferramenta de rede para lembrá-lo de que a limitação está ativada.

Limitar a CPU durante a gravação

Para limitar a CPU durante a gravação:

1. Na ferramenta Desempenho , clique no botão Definições de captura (). Consulte Mostrar definições de gravação acima.

2. Defina a CPU para o nível de limitação pretendido.

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

A limitação é relativa às capacidades do seu computador. Por exemplo, a opção 2x de abrandamento faz com que a CPU funcione duas vezes mais lenta do que o normal. As DevTools não simulam verdadeiramente as CPUs dos dispositivos móveis, porque a arquitetura dos dispositivos móveis é muito diferente da dos computadores de secretária e portáteis.

Ativar estatísticas do seletor CSS

Para ver as estatísticas dos seletores de regras CSS durante eventos de Estilo recalculado de execução prolongada:

1. Clique no botão Definições de captura (). Consulte Mostrar definições de gravação acima.

2. Selecione a caixa de verificação Ativar estatísticas do seletor CSS .

Para obter detalhes, veja Analyze CSS selector performance during Recalculate Style events (Analisar o desempenho do seletor CSS durante eventos de Recalcular Estilo).

Ativar a instrumentação avançada do paint

Para ver a instrumentação detalhada do paint:

1. Clique no botão Definições de captura (). Consulte Mostrar definições de gravação acima.

2. Selecione a caixa de verificação Ativar instrumentação de pintura avançada (lenta ).

Para saber como interagir com as informações do paint, consulte Ver informações sobre camadas abaixo e Ver o gerador de perfis de pintura, abaixo.

Anotar uma gravação e partilhá-la

Depois de registar um rastreio de desempenho, pode analisá-lo e anotar para partilhar as suas conclusões.

Para anotar uma gravação, abra o separador Anotações na barra lateral da ferramenta Desempenho . Se a barra lateral não estiver visível, clique no botão Mostrar barra lateral (

O separador Anotações na barra lateral contém inicialmente instruções sobre como adicionar anotações. Depois de criar anotações, conforme mostrado abaixo, o separador lista as anotações existentes e permite-lhe eliminá-las.

Existem várias formas de adicionar uma anotação:

• Etiquetar um item: para etiquetar um item no rastreio de desempenho, faça duplo clique no item, introduza a etiqueta na caixa de texto e, em seguida, prima Enter.

• Ligar dois itens: para desenhar uma seta entre dois itens no rastreio de desempenho, faça duplo clique no primeiro item, clique no ícone de seta junto ao mesmo e, em seguida, clique no segundo item.

• Etiquetar um intervalo de tempo: para desenhar e etiquetar um intervalo de tempo arbitrário no rastreio de desempenho, mantenha premida a tecla Shift e arraste do início de um intervalo de tempo até ao fim, introduza a etiqueta na caixa de texto apresentada e, em seguida, prima Enter.

Por exemplo, abra a página Web Demonstração dos Separadores de Atividade numa nova janela ou separador, crie uma gravação de desempenho e, em seguida, efetue as três ações acima. Resultado:

Neste exemplo, existem:

• Três anotações.
• Uma anotação de seta que liga duas anotações.
• Um intervalo de tempo anotado realçado em cor-de-rosa.

O separador Anotações mostra o número de anotações junto ao nome do separador; neste exemplo, 5.

Para eliminar uma anotação, paire o cursor sobre a mesma no separador Anotações e, em seguida, clique no botão Eliminar junto ao mesmo.

Para ocultar anotações do rastreio de desempenho, selecione Ocultar anotações na parte inferior do separador Anotações .

Guardar e partilhar uma gravação

Para guardar uma gravação como um ficheiro no seu dispositivo e, mais tarde, partilhá-la com os resultados de desempenho anotados, na barra de ação na parte superior da ferramenta Desempenho , clique no botão Guardar perfil () e, em seguida, selecione Guardar rastreio.

Em alternativa, selecione Guardar rastreio sem anotações.

Em vez de clicar no botão Guardar perfil () na parte superior, pode clicar com o botão direito do rato numa faixa de uma gravação e, em seguida, selecionar Guardar perfil:

Carregar uma gravação

Para carregar uma gravação a partir de um ficheiro, clique no botão Carregar perfil () na barra de ação na parte superior da ferramenta Desempenho .

A ferramenta Desempenho mostrará anotações se estiverem presentes no rastreio.

Em alternativa, clique com o botão direito do rato na ferramenta Desempenho e, em seguida, selecione Carregar perfil:

Pode clicar com o botão direito do rato numa gravação existente ou no ecrã apresentado na ferramenta Desempenho quando não existem gravações.

Limpar a gravação anterior

Depois de efetuar uma gravação, para remover essa gravação da ferramenta Desempenho , clique no botão Limpar gravação ():

Analisar uma gravação de desempenho

Depois de registar o desempenho do runtime ou registar o desempenho da carga, a ferramenta Desempenho apresenta muitos dados sobre a gravação. Utilize os dados registados para analisar o desempenho da sua página Web.

Obter informações acionáveis

A Ferramenta de desempenho extrai informações acionáveis dos dados de desempenho registados. Estas informações são formas de melhorar o desempenho do seu site. As informações incluem:

• INP por fase
• LCP por fase
• Deteção de pedidos LCP
• Culpados de mudança de esquema
• Pedido de bloqueio de composição
• Árvore de dependências de rede
• Melhorar a entrega de imagens
• Latência do pedido de documento
• Apresentação do tipo de letra
• Otimizar o viewport para dispositivos móveis
• Otimizar o tamanho do DOM
• Terceiros
• Custos do seletor CSS
• Fluxo forçado
• Utilizar durações de cache eficientes

As informações concentram-se em melhorar as métricas de Core Web Vitals e em otimizar a rapidez com que a página Web é carregada e composta.

Depois de gravar um perfil na ferramenta Desempenho , o separador Informações na barra lateral mostra a lista de informações acionáveis que se aplicam aos dados de desempenho registados. Para ver a lista de informações que não se aplicam ao perfil, veja a secção Informações aprovadas .

Para utilizar as informações:

1. Faça uma gravação de desempenho, por Desempenho de registo, acima.

2. Na barra lateral esquerda da ferramenta Desempenho , selecione o separador Informações , expanda secções diferentes e paire o cursor sobre e clique em itens. A ferramenta Desempenho realça os eventos correspondentes no rastreio:

   

   Se a barra lateral e o separador Informações não estiverem visíveis, clique no botão Mostrar barra lateral ().

Navegar na gravação

Para inspecionar de perto a gravação de desempenho, pode selecionar uma parte de uma gravação, deslocar um gráfico de chama longo, ampliar e reduzir e utilizar trilhos para saltar entre níveis de zoom.

Utilizar atalhos de teclado para navegar

Para utilizar os atalhos de teclado para navegar rapidamente na gravação, escolha primeiro o seu estilo preferido de navegação por teclado.

No canto superior direito da ferramenta Desempenho , clique no botão Mostrar atalhos () e, em seguida, selecione o botão de opção Moderno ou Clássico . A caixa de diálogo Atalhos de teclado apresenta os atalhos disponíveis para a opção de mapeamento selecionada.

Com o botão de opção Moderno selecionado:

• Para ampliar: Comando/Ctrl + roda do rato.
• Para deslocamento vertical: roda do rato.
• Para deslocamento horizontal: Shift + roda do rato.

Com o botão de opção Clássico selecionado:

• Para ampliar: roda do rato ou touchpad para cima ou para baixo.
• Para deslocamento vertical: Shift + roda do rato.
• Para o deslocamento horizontal: Shift + Seta Para a Esquerda Seta| Paraa Direita

Também pode deslocar para a esquerda e para a direita premindo as teclas A e D e zoom premindo as teclas W ou S .

Veja também:

• Painel de desempenho: ative uma opção de navegação de linha do tempo alternativa em Funcionalidades experimentais no Microsoft Edge DevTools.

Selecionar uma parte de uma gravação

Na parte superior da gravação, é apresentada a secção Descrição geral da linha cronológica , incluindo os gráficos CPU e NET (indicados à direita):

Para selecionar uma parte de uma gravação, na Descrição geral da Linha Cronológica, clique e arraste horizontalmente:

Para selecionar uma parte com o teclado:

1. Concentre a faixa Principal ou qualquer um dos respetivos vizinhos.

2. Utilize as teclas W, A, S, D para ampliar, mover para a esquerda, reduzir e mover para a direita, respetivamente.

Para selecionar uma parte com um trackpad:

1. Paire o cursor sobre a secção Descrição geral da linha cronológica ou qualquer uma das faixas (Principal e respetivos vizinhos).

2. Com dois dedos, percorra para cima para reduzir, percorra para a esquerda para se mover para a esquerda, percorra para baixo para ampliar e percorra para a direita para se mover para a direita.

Pode selecionar uma parte de uma gravação utilizando um rato, teclado ou trackpad.

Rato:

Para selecionar uma parte de uma gravação com o rato:

• Arraste o rato para a esquerda ou para a direita na Descrição Geral. A Descrição Geral é a secção que contém os gráficos CPU e NET :

Para deslocar um gráfico de chama longo na secção Principal ou em qualquer uma das secções vizinhas, clique sem soltar enquanto arrasta para cima e para baixo. Arraste para a esquerda ou para a direita para mover a parte da gravação selecionada.

Teclado:

Para selecionar uma parte de uma gravação com o teclado:

1. Selecione o fundo da secção Principal ou selecione o fundo de uma secção junto à secção Principal , como Interações, Rede ou GPU. Este fluxo de trabalho de teclado só funciona quando uma destas secções está em foco.

2. Prima W ou S para ampliar ou reduzir. Prima A ou D para se mover para a esquerda ou para a direita.

Trackpad:

Para selecionar uma parte de uma gravação com um trackpad:

1. Paire o cursor sobre a secção Descrição geral ou a secção Detalhes . A secção Descrição geral é a área que contém os gráficos FPS, CPU e NET . A secção Detalhes é a área que contém a secção Principal e a secção Interações .

2. Com dois dedos, percorra para cima para reduzir ou reduzir para ampliar. Com dois dedos, percorra para a esquerda para se deslocar para a esquerda ou para a direita para se deslocar para a direita.

Ampliar partes de uma gravação e alternar entre níveis de zoom

A Descrição geral da Linha Cronológica permite-lhe ampliar partes da sua gravação sucessivamente e criar trilhos em cada passo, permitindo-lhe alternar entre estes níveis de zoom.

Para ampliar uma parte da gravação e utilizar trilhos:

1. Em Descrição geral da linha cronológica, selecione uma parte da gravação (acima).

2. Paire o cursor sobre a seleção e, em seguida, clique no botão N ms ():

   

   A seleção expande-se para preencher a Descrição geral da Linha cronológica. Uma cadeia de trilhos começa a ser compilado na parte superior da Descrição geral da Linha Cronológica.

3. Repita os dois passos anteriores para criar outro trilho aninhado. Pode continuar a aninhar trilhos desde que o intervalo de seleção seja superior a 5 milissegundos.

4. Para ir para um nível de zoom escolhido, clique no trilho correspondente na cadeia na parte superior da Descrição geral da Linha Cronológica.

Para remover os subordinados de um trilho, clique com o botão direito do rato no trilho principal e, em seguida, selecione Remover trilhos subordinados:

Deslocar um gráfico de chama longo

Para deslocar um gráfico de chama longo na faixa Principal ou em qualquer um dos respetivos vizinhos, clique sem soltar e, em seguida, arraste em qualquer direção até que o que procura seja apresentado.

Atividades de pesquisa

Pode procurar nas atividades na faixa Principal e nos pedidos na Faixa de rede .

Para abrir a caixa de pesquisa na parte inferior da ferramenta Desempenho :

1. Prima Ctrl+F (Windows, Linux) ou Comando+F (macOS).

   A caixa Localizar é apresentada na parte inferior da ferramenta Desempenho :

   

2. Na caixa Localizar , introduza uma consulta, como "recalcular estilo".

   As atividades correspondentes são realçadas na secção Principal à medida que escreve e o número total de correspondências é apresentado na caixa de pesquisa. A primeira atividade correspondente está selecionada, descrita a azul:

   

Para navegar entre as atividades que correspondem à sua consulta:

• Para selecionar a atividade seguinte, prima Enter ou clique no botão Seguinte ().

• Para selecionar a atividade anterior, prima Shift+Enter ou clique no botão Anterior ().

A ferramenta Desempenho mostra uma descrição sobre a atividade selecionada na caixa de pesquisa.

Para modificar as definições de consulta:

• Para utilizar uma expressão regular na consulta, clique no botão Ativar expressões regulares (). Se selecionar o botão Regex e, em seguida, introduzir ^E.* que localiza qualquer atividade que comece com a letra E.

• Para tornar a consulta sensível às maiúsculas e minúsculas, clique no botão Ativar pesquisa sensível a maiúsculas e minúsculas ().

Para ocultar a caixa de pesquisa, clique no botão Cancelar .

Alterar a ordem das faixas e ocultá-las

Para eliminar o rastreio de desempenho, pode alterar a ordem das faixas e ocultar as irrelevantes no modo de configuração de monitorização.

Para mover e ocultar faixas:

1. Para entrar no modo de configuração, clique com o botão direito do rato num nome de faixa e, em seguida, selecione Configurar faixas.

2. Clique no botão Mover faixa para cima () ou no botão Mover faixa para baixo () para mover uma faixa para cima ou para baixo. Clique no botão Ocultar faixa () para ocultá-la.

3. Clique com o botão direito do rato na faixa e, em seguida, selecione Concluir configuração.

A Ferramenta de desempenho também aplica a configuração do seu registo a novos rastreios, a menos que feche e volte a abrir as DevTools.

Ver main atividade de thread

Utilize a secção Principal para ver a atividade que ocorreu no main thread da página:

Selecione um evento para ver mais informações sobre o mesmo no separador Resumo . DevTools descreve o evento selecionado:

DevTools representa main atividade de threads com um gráfico de chama:

O eixo x representa a gravação ao longo do tempo. O eixo y representa a pilha de chamadas. Um evento próximo da parte superior causa os eventos abaixo do mesmo; por exemplo, na figura anterior, um input evento causou um Function Call, que executou uma função anónima que chamou filterByCamera e, em seguida, populateGallery. Em seguida, a populateGallery função efetuou alterações do DOM ao chamar set innerHTML.

O DevTools atribui cores aleatórias aos scripts. Na figura anterior, os pedidos de função de um script são fúcsia colorida (roxo-rosa). O amarelo mais escuro representa a atividade de scripting e o evento roxo representa a atividade de composição. Estes eventos amarelos e roxos mais escuros são consistentes em todas as gravações.

Se quiser ocultar o gráfico de chama detalhado dos pedidos JavaScript, veja Disable JavaScript samples (Desativar exemplos de JavaScript), acima. Quando os exemplos de JavaScript são desativados, apenas são apresentados eventos de alto nível, como Event: input e Function Call da figura anterior.

Ler o gráfico de chama

A ferramenta Desempenho representa main atividade de thread num gráfico de chama. O eixo x representa a gravação ao longo do tempo. O eixo y representa a pilha de chamadas. Os eventos na parte superior causam os eventos abaixo.

A ferramenta Desempenho atribui aos scripts cores aleatórias para dividir o gráfico de chama e torná-lo mais legível.

As tarefas longas também são realçadas com um triângulo vermelho e com a parte com mais de 50 milissegundos sombreados a vermelho.

Além disso, a faixa Principal mostra informações sobre os perfis de CPU iniciados e parados com profile() as funções da consola e profileEnd() .

Para ocultar o gráfico de chama detalhado das chamadas JavaScript, veja Disable JavaScript samples (Desativar exemplos de JavaScript). Quando os exemplos de JS são desativados, vê apenas os eventos de alto nível, como Event (click) e Function Call.

Controlar iniciadores de eventos

A faixa Principal pode mostrar setas que ligam os seguintes iniciadores e os eventos que causaram:

• Invalidação de estilo ou esquema –>Recalcular estilos ou Esquema
• Moldura de Animação de Pedido ->Fotograma de Animação Acionado
• Pedir Chamada de Retorno Inativa ->Chamada de Retorno Inativa de Acionamento
• Instalar Temporizador ->Temporizador Acionado
• Criar WebSocket ->Enviar... e Receber Handshake webSocket ou Destruir WebSocket
• Schedule postTask ->Fire postTask or Abort postTask

Para ver as setas, localize um iniciador ou o evento que causou no gráfico de chama e selecione-o.

Quando selecionado, o separador Resumo mostra o Iniciador para ligações para iniciadores e Iniciado por ligações para os eventos que causaram. Clique nos mesmos para alternar entre os eventos correspondentes.

Ocultar funções e os respetivos filhos no gráfico de chama

Para eliminar o gráfico de chama no thread Principal , pode ocultar as funções selecionadas ou os respetivos subordinados:

1. Na faixa Principal , clique com o botão direito do rato numa função e escolha uma das seguintes opções ou prima o atalho correspondente:

   • Ocultar função (H)
   • Ocultar crianças (C)
   • Ocultar crianças repetidas (R)
   • Repor subordinados (U)
   • Repor rastreio (T)
   • Adicionar script para ignorar a lista (I)

   É apresentado um número pendente oculto () junto ao nome da função com subordinados ocultos.

2. Para ver o número de subordinados ocultos, paire o cursor sobre o número do botão pendente oculto ().

3. Para repor uma função com subordinados ocultos ou todo o gráfico de chama, selecione a função e prima U ou clique com o botão direito do rato em qualquer função e selecione Repor rastreio , respetivamente.

Ignorar scripts no gráfico de chama

Para adicionar um script à lista ignorar, clique com o botão direito do rato num script no gráfico e selecione Adicionar script para ignorar a lista.

O gráfico fecha scripts ignorados, marca-os como Lista de ignorar e adiciona-os às Regras de exclusão personalizadas em Personalizar e controlar DevTools () >Definições>Ignorar lista. Os scripts ignorados são guardados até os remover do rastreio ou das Regras de exclusão personalizadas.

Ver atividades numa tabela

Depois de gravar uma página, além da secção Principal para analisar atividades, a DevTools também fornece três vistas tabulares para analisar atividades. Cada vista dá-lhe uma perspetiva diferente sobre as atividades:

• Para ver as atividades em que mais tempo foi gasto diretamente, utilize o separador Inferior para cima .

• Para ver as atividades de raiz que causam mais trabalho, utilize o separador Árvore de chamadas.

• Para ver as atividades pela ordem em que ocorreram durante a gravação, utilize o separador Registo de eventos .

Para o ajudar a encontrar o que procura mais rapidamente, os três separadores têm botões para filtragem avançada junto à Barra de filtro :

• O botão Ativar expressões regulares ().

• O botão Ativar pesquisa sensível a maiúsculas e minúsculas ().

Cada vista tabular na ferramenta Desempenho mostra ligações para atividades como chamadas de funções. Para o ajudar a depurar, o DevTools localiza as declarações de função correspondentes nos ficheiros de origem. Além disso, se os mapas de origem adequados estiverem presentes e ativados, o DevTools localiza automaticamente os ficheiros originais.

Clique numa ligação para abrir um ficheiro de origem na ferramenta Origens .

As três secções seguintes referem-se à mesma demonstração. Pode executar a demonstração em Demonstração de Separadores de Atividade e ver a origem em MicrosoftEdge/Demos > /devtools-performance-activitytabs/.

Atividades de raiz

Eis uma explicação do conceito de atividades de raiz mencionado nas secções Árvore de Chamadas , Separador Inferior Para Cima e Registo de Eventos .

As atividades de raiz são atividades que fazem com que o browser faça algum trabalho. Por exemplo, quando clica numa página Web, o browser executa uma Event atividade como a atividade raiz. Essa Event atividade pode fazer com que outras atividades sejam executadas, como um processador.

No gráfico de chama da secção Principal , as atividades raiz estão na parte superior do gráfico. Nos separadores Árvore de chamadas e Registo de eventos , as atividades raiz são os itens de nível superior.

Para obter um exemplo de atividades de raiz, consulte o separador Árvore de chamadas, abaixo.

O separador Árvore de chamadas

Utilize o separador Árvore de chamadas para ver as atividades de raiz que causam mais trabalho.

O separador Árvore de chamadas só apresenta atividades durante a parte selecionada da gravação. Para saber como selecionar uma parte de uma gravação, consulte Selecionar uma parte de uma gravação acima.

Na figura anterior, os itens de nível superior na coluna Atividade , como Event Timing, são atividades de raiz. O aninhamento representa a pilha de chamadas. Por exemplo, na figura anterior, Event Timing causou Event: mouseup, que causou Function Call, que causa (anonymous)e assim sucessivamente.

O Tempo Autónomo representa o tempo gasto diretamente nessa atividade. O Tempo Total representa o tempo despendido nessa atividade ou em qualquer uma das crianças.

Clique em Tempo Autónomo, Tempo Total ou Atividade para ordenar a tabela por essa coluna.

Utilize a caixa de texto Filtrar para filtrar eventos por nome de atividade.

Por predefinição, o menu Agrupamento está definido como Sem Agrupamento. Utilize o menu Agrupamento para ordenar a tabela de atividade com base em vários critérios.

Clique em Mostrar Pilha Mais Pesada () para revelar outra tabela à direita da tabela Atividade . Clique numa atividade para preencher a tabela Pilha Mais Pesada . A tabela Pilha Mais Pesada apresenta os elementos subordinados da atividade selecionada que demoraram mais tempo a ser executados.

O separador Inferior para Cima

Utilize o separador Inferior para cima para ver quais as atividades que tiveram mais tempo de agregação.

O separador Inferior para Cima apenas apresenta atividades durante a parte selecionada da gravação. Para saber como selecionar uma parte de uma gravação, consulte Selecionar uma parte de uma gravação acima.

No gráfico de chama da secção Principal da figura anterior, quase todo o tempo foi despendido a executar as afunções , be c . As principais atividades no separador Inferior para cima da figura anterior também asão , be c. No separador Inferior para cima , a próxima atividade mais cara é Minor GC.

A coluna Tempo Autónomo representa o tempo agregado despendido diretamente nessa atividade, em todas as ocorrências.

A coluna Tempo Total representa o tempo agregado despendido nessa atividade ou em qualquer uma das crianças.

O separador Registo de eventos

Utilize o separador Registo de eventos para ver as atividades pela ordem em que ocorreram durante a gravação.

O separador Registo de eventos apenas apresenta atividades durante a parte selecionada da gravação. Para saber como selecionar uma parte de uma gravação, consulte Selecionar uma parte de uma gravação acima.

A coluna Hora de Início representa o ponto em que essa atividade foi iniciada, relativamente ao início da gravação. Por exemplo, a hora de início do 925.0 ms item selecionado na figura anterior significa que a atividade começou 925,0 ms após o início da gravação.

A coluna Tempo Autónomo representa o tempo despendido diretamente nessa atividade.

A coluna Tempo Total representa o tempo gasto diretamente nessa atividade ou em qualquer uma das crianças.

Clique no cabeçalho da coluna Hora de Início, Hora Autónoma ou Tempo Total , para ordenar a tabela por essa coluna.

Utilize a caixa de texto Filtrar para filtrar atividades por nome.

Utilize o menu Duração para filtrar as atividades que demoraram menos de 1 ms ou 15 ms. Por predefinição, o menu Duração está definido como Tudo, o que significa que todas as atividades são apresentadas.

Desmarque as caixas de verificação Carregamento, Scripts, Composição ou Pintura para filtrar todas as atividades dessas categorias.

Ver marcadores de desempenho

Numa sobreposição com linhas verticais no rastreio de desempenho, pode ver marcadores de desempenho importantes, tais como:

• First Paint (FP)
• First Contentful Paint (FCP)
• Maior Tinta Contentful (LCP)
• EVENTO DOMContentLoaded (DCL)
• Evento onload (L)

Paire o cursor sobre um nome de marcador na parte inferior do rastreio para ver o carimbo de data/hora.

Ver temporizações personalizadas

Na faixa Temporizações , veja os marcadores de desempenho personalizados, tais como:

• performance.mark() chamadas.

• performance.measure() chamadas.

Selecione um marcador para ver mais detalhes no separador Resumo , incluindo o carimbo de data/hora, o tempo total, o tempo de utilização autónoma e o detail objeto. Para performance.mark() e performance.measure() chamadas, o separador também mostra rastreios de pilha.

Ver interações

Utilize a secção Interações para localizar e analisar as interações do utilizador que ocorreram durante a gravação:

Uma linha vermelha na parte inferior de uma interação representa o tempo despendido à espera do thread main.

Clique numa interação para ver mais informações sobre o mesmo no separador Resumo .

Ver turnos de esquema

A vista de esquema muda na faixa Turnos de esquema. Os turnos são apresentados como diamantes roxos e agrupados em clusters (linhas roxas) com base na sua proximidade no linha do tempo. Para obter informações sobre clusters, veja Evolução da métrica CLS em web.dev.

Para realçar um elemento que causou uma mudança de esquema na janela viewport, paire o cursor sobre o losango correspondente.

Para ver mais informações sobre uma mudança de esquema ou turnos no separador Resumo com temporizações, pontuações, elementos e potenciais culpados, clique no losango ou cluster correspondente.

Para obter mais informações, veja Shift de Esquema Cumulativo (CLS) em web.dev.

Ver animações

Ver animações na faixa Animações . As animações são nomeadas como propriedades ou elementos CSS correspondentes, se existirem, por exemplo, transform ou my-element. As animações não compositórias são marcadas com triângulos vermelhos no canto superior direito.

Selecione uma animação para ver mais detalhes no separador Resumo , incluindo motivos para composicionar falhas.

Ver atividade da GPU

Veja a atividade da GPU na secção GPU da ferramenta Desempenho :

Ver atividade raster

Veja a atividade raster na secção Conjunto de Threads .

Analisar frames por segundo (FPS)

O DevTools fornece duas formas de analisar frames por segundo:

• Utilize a secção Frames para ver quanto tempo demorou uma determinada moldura. Consulte a secção Frames abaixo.

• Utilize o medidor FPS para uma estimativa em tempo real do FPS à medida que a página é executada. Veja Ver fotogramas por segundo em tempo real com o medidor FPS, abaixo.

A secção Frames

A secção Frames indica-lhe exatamente quanto tempo demorou uma determinada moldura.

Paire o cursor sobre uma moldura para ver uma descrição com mais informações sobre a mesma:

O exemplo acima mostra uma descrição quando paira o cursor sobre uma moldura.

A secção Frames pode mostrar quatro tipos de fotogramas:

• Moldura inativa (branco). Sem alterações.

• Moldura (verde). Composto conforme esperado e dentro do tempo.

• Moldura parcialmente apresentada (amarelo com um padrão de linha tracejada larga dispersa). O Microsoft Edge fez o possível para compor, pelo menos, algumas atualizações visuais no tempo. Por exemplo, no caso de o trabalho do main thread do processo de composição (animação de tela) estar atrasado, mas o thread compositor (deslocamento) estiver dentro do tempo.

• Moldura largada (vermelho com um padrão de linha sólida densa). O Microsoft Edge não consegue compor o fotograma em tempo razoável.

Clique numa moldura para ver mais informações sobre a moldura no separador Resumo na parte inferior da ferramenta Desempenho . DevTools descreve a moldura selecionada a azul:

Ver pedidos de rede

Expanda a secção Rede para ver uma cascata de pedidos de rede que ocorreram durante a gravação:

Clique num pedido para ver mais informações sobre o mesmo no separador Resumo :

Os pedidos na secção Rede são codificados por cores da seguinte forma:

• Fundo azul: pedido HTML.
• Fundo roxo: pedido CSS.
• Fundo amarelo escuro: pedido JS.
• Fundo verde: pedido de imagem.

Os pedidos têm quadrados no canto superior esquerdo:

• Um quadrado azul-escuro no canto superior esquerdo de um pedido significa que é um pedido de prioridade superior.
• Um quadrado azul mais claro significa prioridade inferior.

Por exemplo, na figura anterior, o pedido da galeria de fotografias , no canto superior esquerdo da secção Rede , é de prioridade superior.

Os pedidos podem ter linhas nos lados esquerdo e direito e as barras podem ser divididas em duas cores. Eis o que estas linhas e cores representam:

• A linha da esquerda corresponde ao Connection Start grupo de eventos, inclusive. Por outras palavras, é tudo antes Request Sentde , exclusivo.

• A parte simplificada da barra é Request Sent e Waiting (TTFB) para a resposta do servidor.

• A parte escura da barra é Content Download.

• A linha certa é essencialmente o tempo despendido à espera do thread main. Isto não está representado no separador Temporização .

Ver métricas de memória

Selecione a caixa de verificação Memória para ver as métricas de memória numa gravação de desempenho:

O DevTools apresenta um gráfico de Memória , acima do separador Resumo . Também existe um gráfico abaixo do gráfico NET , denominado HEAP. O gráfico HEAP fornece as mesmas informações que a linha da Área Dinâmica para Dados JS no gráfico Memória :

As linhas coloridas no mapa do gráfico para as caixas de verificação coloridas acima do gráfico. Desmarque uma caixa de verificação para ocultar essa categoria do gráfico.

O gráfico só apresenta a região da gravação que está atualmente selecionada. Por exemplo, na figura anterior, o gráfico Memória mostra apenas a utilização da memória de cerca de 3600 ms para a marca 6200 ms.

Veja também:

• Visualize fugas de memória (Ferramenta de desempenho: caixa de verificação Memória), abaixo.

Ver a duração de uma parte de uma gravação

Ao analisar uma secção como Rede ou Principal, por vezes precisa de uma estimativa mais precisa de quanto tempo determinados eventos demoraram. Mantenha premida a tecla Shift, clique sem soltar e arraste para a esquerda ou para a direita para selecionar uma parte da gravação. Na parte inferior da sua seleção, a DevTools mostra quanto tempo demorou essa parte:

Ver uma captura de ecrã

Para saber como ativar capturas de ecrã, consulte Captura de ecrã durante a gravação, acima.

Para ver uma captura de ecrã do aspeto da página durante esse momento da gravação, paire o cursor sobre a Descrição Geral. A Descrição Geral é a secção que contém os gráficos CPU e NET :

Também pode ver capturas de ecrã ao selecionar uma moldura na secção Frames . O DevTools apresenta uma pequena versão da captura de ecrã no separador Resumo :

Para ampliar a captura de ecrã, clique na miniatura no separador Resumo .

Ver informações de camadas

Para ver informações de camadas avançadas sobre uma moldura:

1. Na ferramenta Desempenho , clique no botão Definições de captura () e, em seguida, selecione a caixa de verificação Ativar instrumentação de composição avançada (lenta ).

2. Na secção Frames , selecione uma moldura. As DevTools apresentam informações sobre as camadas no separador Camadas na parte inferior da ferramenta Desempenho :

   

O separador Camadas funciona como o separador Camadas Compostas na ferramenta Vista 3D . Para saber como interagir com o separador Camadas , veja Navegar nas camadas da página Web, no z-index e no DOM com a ferramenta Vista 3D.

Ver o gerador de perfis de pintura

Para ver informações avançadas sobre um evento de pintura:

1. Na ferramenta Desempenho , clique no botão Definições de captura () e, em seguida, selecione a caixa de verificação Ativar instrumentação de composição avançada (lenta ).

2. Selecione um evento do Paint na secção Principal . O DevTools apresenta informações sobre o evento paint no separador Paint Profiler :

   

Ver estatísticas do seletor CSS

Para ver estatísticas sobre os seletores das regras CSS que foram recalculadas durante uma gravação de desempenho:

• Na ferramenta Desempenho , clique no botão Definições de captura () e, em seguida, selecione a caixa de verificação Ativar instrumentação de composição avançada (lenta ).

  As DevTools apresentam informações agregadas sobre os seletores das regras CSS que foram recalculadas durante a gravação no separador Estatísticas do Seletor :

  

1. Na secção Principal , selecione um evento Recalcular Estilo . No separador Estatísticas do Seletor , DevTools apresenta informações sobre os seletores das regras CSS que foram recalculadas durante esse evento.

Veja também:

• Analisar o desempenho do seletor CSS durante os eventos Recalcular Estilo

Ver mensagens entre janelas, iframes e trabalhadores dedicados

O painel Desempenho da experimentação DevTools : mostrar fluxos de envio e processamento postMessage melhora a secção Principal da ferramenta desempenho para ajudá-lo a identificar postMessage rapidamente eventos e processadores, ao distinguir eventos que são acionados pelo postMessage método de outros eventos apresentados na ferramenta Desempenho . Esta experimentação ajuda-o a investigar problemas de desempenho relacionados com a publicação de mensagens em vários threads de uma aplicação.

Sem esta experimentação, os eventos que são acionados através da distribuição e processamento de mensagens entre threads de uma aplicação aparecem como eventos genéricos de chamada de função de scripting. Com esta experimentação ativada:

• postMessage os eventos de distribuição são apresentados como Schedule postMessage.
• postMessage os eventos do processador são apresentados como Na Mensagem:

Esta experimentação ajuda-o a investigar quando ocorreu uma postMessage chamada e durante quanto tempo a mensagem foi colocada em fila antes de o postMessage processador começar. Os eventos de distribuição estão ligados a eventos do processador por setas do iniciador que são apresentadas quando clica em qualquer um dos tipos de evento:

Para utilizar esta funcionalidade, em DevTools, selecione Personalizar e controlar As DevTools () >Definições Experimentações>, selecione a caixa de verificação Painel de desempenho: mostrar fluxos de distribuição e processamento postMessage, clique no botão Fechar (X) e, em seguida, clique no botão Recarregar DevTools.

Veja também:

• Referência de evento de gravação de desempenho
• demonstração de Eventos de Rastreio postMessage (composta)
• demonstração de Eventos de Rastreio postMessage (código fonte)

Analisar o desempenho da composição com a ferramenta de Composição

Utilize a Ferramenta de composição para ajudar a visualizar o desempenho de composição da sua página. A ferramenta de Composição é uma ferramenta de Vista Rápida ; Se o abrir a partir do Menu de Comandos, este é aberto na parte inferior de DevTools.

Para abrir a ferramenta de Composição :

1. Clique com o botão direito do rato numa página Web e, em seguida, selecione Inspecionar. Em alternativa, prima Ctrl+Shift+I (Windows, Linux) ou Comando+Opção+I (macOS). O DevTools é aberto.

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

   A ferramenta de Composição é aberta:

   

Veja também:

• Ferramenta de composição, para ver o aspeto de uma página Web com diferentes opções de visualização ou deficiências visuais

Ver fotogramas por segundo em tempo real com o medidor FPS

O medidor FPS é uma sobreposição que aparece no canto superior esquerdo da página Web composta. Fornece uma estimativa em tempo real do FPS à medida que a página é executada. Para abrir o medidor FPS:

1. Abra a Ferramenta de composição . Veja Analisar o desempenho da composição com a ferramenta de Composição acima.

2. Selecione a caixa de verificação Estatísticas de Composição de Molduras . A sobreposição do medidor FPS é apresentada na página Web composta:

   

Ver eventos de pintura em tempo real com o Paint Flashing

Utilize o Paint Flashing para obter uma vista em tempo real de todos os eventos de pintura na página. Sempre que uma parte da página é novamente pintada, a DevTools destaca essa secção a verde.

Para ativar o Paint Flashing:

1. Abra a Ferramenta de composição . Veja Analisar o desempenho da composição com a ferramenta de Composição acima.

2. Selecione a caixa de verificação Flashing do Paint . Os contornos verdes aparecem na página Web composta:

   

Ver uma sobreposição de camadas com Limites de Camada

Para ver uma sobreposição de limites de camada e mosaicos na parte superior da página:

1. Abra a Ferramenta de composição , conforme descrito em Analisar o desempenho de composição com a ferramenta de Composição acima.

2. Selecione a caixa de verificação Limites de Camada . Os limites de camada aparecem na página Web composta:

   

Veja os comentários em debug_colors.cc para obter uma explicação das codificações de cores.

Encontrar problemas de desempenho de deslocamento em tempo real

Utilize a caixa de verificação Problemas de Desempenho de Deslocamento para identificar elementos da página que têm serviços de escuta de eventos relacionados com o deslocamento que podem prejudicar o desempenho da página. O DevTools descreve os elementos potencialmente problemáticos no teal.

Para ver problemas de desempenho de deslocamento:

1. Abra a Ferramenta de composição , conforme descrito em Analisar o desempenho de composição com a ferramenta de Composição acima.

2. Selecione a caixa de verificação Problemas de Desempenho de Deslocamento . Estão descritos elementos potencialmente problemáticos:

   

Veja também:

• Rects de deslocamento lento (caixa de verificação) em Navegar em camadas de página Web, z-index e DOM com a ferramenta Vista 3D.

Desativar tipos de letra locais

Na ferramenta Composição , utilize a caixa de verificação Desativar tipos de letra locais para emular origens em falta local() nas @font-face regras.

Por exemplo, quando o tipo de letra Rubik está instalado no seu dispositivo e a regra o @font-face src utiliza como tipo local() de letra, o Microsoft Edge utiliza o ficheiro de tipo de letra local do seu dispositivo.

Quando a opção Desativar tipos de letra locais está selecionada, a DevTools ignora os local() tipos de letra e obtém cada tipo de letra da rede:

Esta funcionalidade é útil se utilizar duas cópias diferentes do mesmo tipo de letra durante o desenvolvimento, tais como:

• Um tipo de letra local para as suas ferramentas de estrutura.
• Um tipo de letra Web para o seu código.

Utilize Desativar tipos de letra locais para facilitar o processo:

• Depurar e medir o desempenho de carregamento e a otimização de tipos de letra Web.
• Verifique a precisão das regras do CSS @font-face .
• Descubra as diferenças entre as versões locais instaladas no seu dispositivo e um tipo de letra Web.

Visualizar fugas de memória (Ferramenta de desempenho: caixa de verificação Memória)

Como ponto de partida para investigar a utilização da memória da página Web, utilize a caixa de verificação Memória da ferramenta desempenho. (Em alternativa, monitorize a utilização da memória em tempo real (Gestor de Tarefas do Browser Microsoft Edge).)

A ferramenta Desempenho ajuda-o a visualizar a utilização de memória de uma página ao longo do tempo.

1. Em DevTools, abra a ferramenta Desempenho .

2. Selecione a caixa de verificação Memória .

3. Faça uma gravação, por Desempenho dos registos, acima.

É uma boa prática começar e terminar a gravação com uma libertação de lixo forçada. Para forçar a libertação da memória, clique no botão recolher durante a gravação.

Para demonstrar gravações de memória, considere o seguinte código:

var x = [];
function grow() {
    for (var i = 0; i < 10000; i++) {
        document.body.appendChild(document.createElement('div'));
    }
    x.push(new Array(1000000).join('x'));
}
document.getElementById('grow').addEventListener('click', grow);

Sempre que o botão referenciado no código é clicado, são acrescentados 10 000 div nós ao corpo do documento e é enviada uma cadeia de 1000 000 x carateres para a x matriz. A execução do código anterior produz uma gravação na ferramenta Desempenho :

Em primeiro lugar, uma explicação da interface de utilizador. O gráfico HEAP no painel Descrição Geral (abaixo do NET) representa a área dinâmica para dados JS. Abaixo do painel Descrição Geral encontra-se o painel Contador . A utilização da memória é dividida pela área dinâmica para dados JS (igual ao gráfico HEAP no painel Descrição geral ), documentos, nós DOM, serviços de escuta e memória GPU. Desmarque uma caixa de verificação para ocultá-la do gráfico.

Agora, uma análise do código em comparação com a figura anterior. Se rever o contador de nós (o gráfico verde), este corresponde corretamente ao código. A contagem de nós aumenta em passos discretos. Pode presumir que cada aumento na contagem de nós é uma chamada para grow().

O gráfico de área dinâmica para dados JS (o gráfico azul) não é tão simples. De acordo com as melhores práticas, o primeiro mergulho é, na verdade, uma libertação da memória forçada (clique no botão recolher ).

À medida que a gravação progride, os picos de tamanho da área dinâmica para dados JS são apresentados. Isto é natural e esperado: o código JavaScript está a criar os nós DOM em cada botão em que clica e está a fazer muito trabalho quando cria a cadeia de um milhão de carateres.

O mais importante aqui é o facto de a área dinâmica para dados JS terminar mais alto do que começou (o "início" aqui é o ponto após a libertação forçada da memória). No mundo real, se vir este padrão de aumento do tamanho da área dinâmica para dados do JS ou do tamanho do nó, poderá indicar uma fuga de memória.

Veja também:

• Veja as métricas de memória acima.

Observação

Partes desta página são modificações baseadas no trabalho criado e partilhado pela Google e utilizado de acordo com os termos descritos na Licença Internacional Creative Commons Attribution 4.0. 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.