Referência de recursos de desempenho

Esta página é uma referência abrangente dos recursos do DevTools relacionados à análise de desempenho.

Para obter um tutorial passo a passo sobre como analisar o desempenho de uma página usando a ferramenta Desempenho, consulte Analisar o desempenho do tempo de execução (tutorial).

As imagens nesta página mostram o DevTools desencaixado em sua própria janela dedicada. Para saber mais sobre como desencaixar o DevTools, consulte Desencaixar o DevTools em uma janela separada em Alterar o posicionamento do DevTools (Desencaixar, Encaixar na parte inferior, Encaixar à esquerda).

Conteúdo detalhado:

• Abrir a ferramenta Desempenho
• Desempenho recorde
  • Registrar o desempenho do tempo de execução
  • Registrar desempenho de carga
  • Captura de tela durante a gravação
  • Forçar a coleta de lixo durante a gravação
  • Mostrar configurações de gravação
  • Desabilitar exemplos de JavaScript
  • Controlar a rede durante a gravação
  • Controlar a CPU durante a gravação
  • Habilitar estatísticas do seletor CSS
  • Habilitar instrumentação avançada de pintura
• Anote uma gravação e compartilhe-a
  • Salvar e compartilhar uma gravação
  • Carregar uma gravação
• Limpar a gravação anterior
• Analisar uma gravação de desempenho
  • Obtenha insights acionáveis
  • Navegar pela gravação
    • Use atalhos de teclado para navegar
    • Selecionar uma parte de uma gravação
    • Ampliar partes de uma gravação e alternar entre os níveis de zoom
    • Rolar um longo gráfico de chamas
  • Pesquisar atividades
  • Alterar a ordem das faixas e ocultá-las
  • Exibir atividade do thread principal
  • Leia o gráfico de degradê
  • Acompanhar iniciadores de eventos
  • Ocultar funções e seus filhos no gráfico de degradê
    • Ignorar scripts no gráfico de degradê
  • Exibir atividades em uma tabela
    • Atividades raiz
    • A guia De baixo para cima
    • A guia Árvore de chamadas
    • A guia Log de eventos
  • Exibir marcadores de desempenho
  • Exibir intervalos personalizados
  • Exibir interações
  • Exibir turnos de layout
  • Exibir animações
  • Exibir atividade da GPU
  • Exibir atividade de varredura
  • Analisar quadros por segundo (FPS)
    • A seção Quadros
  • Exibir solicitações de rede
  • Exibir métricas de memória
  • Exibir a duração de uma parte de uma gravação
  • Exibir uma captura de tela
  • Exibir informações de camadas
  • Exibir perfil de pintura
  • Exibir estatísticas do seletor de CSS
  • Exibir mensagens entre janelas, iframes e trabalhadores dedicados
  • Exibir mensagens do WebSocket
• Analisar o desempenho da renderização com a ferramenta Renderização
  • Visualize quadros por segundo em tempo real com o medidor de FPS
  • Veja eventos de pintura em tempo real com o Paint Flashing
  • Exibir uma sobreposição de camadas com bordas de camada
  • Encontrar problemas de desempenho de rolagem em tempo real
  • Desabilitar fontes locais
• Visualizar vazamentos de memória (ferramenta Desempenho: caixa de seleção Memória)

Abrir a ferramenta Desempenho

Para abrir a ferramenta Desempenho no DevTools:

1. Clique com o botão direito do mouse em uma página da Web e selecione Inspecionar.

   Ou pressione Ctrl+Shift+I (Windows, Linux) ou Command+Option+I (macOS).

   O DevTools é aberto.

2. No DevTools, na Barra de Atividades, selecione a guia Desempenho ().

   Se essa guia não estiver visível, clique no botão Mais ferramentas ().

Desempenho recorde

As seções a seguir descrevem como registrar o desempenho de uma página da Web no DevTools.

Registrar o desempenho do tempo de execução

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

1. Vá para a página da Web que você deseja analisar, como a demonstração da Galeria de Fotos.

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

   O DevTools é aberto.

3. Na Barra de Atividades, selecione a ferramenta Desempenho ().

4. Clique no botão Gravar ().

   

5. Interaja com a página por um tempo. O DevTools registra todas as atividades da página que ocorrem como resultado de suas interações.

6. Clique novamente em Gravar . Ou clique em Parar para interromper a gravação.

   A ferramenta Desempenho exibe a gravação.

Registrar desempenho de carga

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

1. Vá para a página da Web que você deseja analisar, como a demonstração da Galeria de Fotos.

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

   O DevTools é aberto.

3. Na Barra de Atividades, selecione a ferramenta Desempenho ().

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

   

   O DevTools registra métricas de desempenho enquanto a página é atualizada e, em seguida, interrompe automaticamente a gravação alguns segundos após o término do carregamento. Em seguida, o DevTools exibe a gravação e amplia automaticamente a parte da gravação em que a maior parte da atividade ocorreu:

   

Captura de tela durante a gravação

Para capturar uma captura de tela de cada quadro durante a gravação, marque a caixa de seleção Capturas de tela :

Para saber como interagir com capturas de tela, consulte Exibir uma captura de tela abaixo.

Forçar a coleta de lixo durante a gravação

Para forçar a coleta de lixo enquanto você está gravando uma página, clique no botão Coletar lixo ():

Mostrar configurações de gravação

Para expor mais configurações relacionadas a como o DevTools captura gravações de desempenho:

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

  As caixas de seleção e as listas suspensas são exibidas na parte superior da ferramenta Desempenho :

  

Desabilitar exemplos de JavaScript

Por padrão, a seção Principal de uma gravação exibe pilhas de chamadas detalhadas de funções JavaScript que foram chamadas durante a gravação. Para desabilitar as pilhas de chamadas JavaScript:

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

2. Marque a caixa de seleção Desabilitar exemplos de JavaScript .

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

As duas figuras a seguir mostram a diferença entre desabilitar e habilitar exemplos de JavaScript. A seção principal da gravação é muito mais curta quando a amostragem JavaScript está desabilitada, pois a gravação omite as pilhas de chamadas JavaScript.

Um exemplo de uma gravação quando as amostras JS estão desativadas:

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

Controlar a rede durante a gravação

Para limitar a rede durante a gravação:

1. Na ferramenta Desempenho, clique no botão Configurações de Captura (). Consulte Mostrar configurações de gravação, acima.

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

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

Controlar a CPU durante a gravação

Para controlar a CPU durante a gravação:

1. Na ferramenta Desempenho, clique no botão Configurações de Captura (). Consulte Mostrar configurações de gravação, acima.

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

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

A limitação é relativa aos recursos do seu computador. Por exemplo, a opção de desaceleração de 2x faz com que sua CPU opere duas vezes mais devagar que o normal. O DevTools não simula realmente as CPUs dos dispositivos móveis, pois a arquitetura dos dispositivos móveis é muito diferente da dos desktops e laptops.

Habilitar estatísticas do seletor CSS

Para exibir as estatísticas dos seletores de regras CSS durante eventos de Recalcular Estilo de longa duração:

1. Clique no botão Configurações de Captura (). Consulte Mostrar configurações de gravação, acima.

2. Marque a caixa de seleção Habilitar estatísticas do seletor CSS (lenta).

Para obter detalhes, consulte Analisar o desempenho do seletor CSS durante os eventos Recalculate Style.

Habilitar instrumentação avançada de pintura

Para visualizar a instrumentação de pintura detalhada:

1. Clique no botão Configurações de Captura (). Consulte Mostrar configurações de gravação, acima.

2. Marque a caixa de seleção Habilitar instrumentação de pintura avançada (lenta).

Para saber como interagir com as informações de pintura, consulte Exibir informações de camadas, abaixo, e Exibir perfil de pintura, abaixo.

Anote uma gravação e compartilhe-a

Depois que um rastreamento de desempenho é registrado, você pode analisá-lo e anotá-lo para compartilhar suas descobertas.

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

A guia Anotações na barra lateral inicialmente contém instruções sobre como adicionar anotações. Depois de criar as anotações, conforme mostrado abaixo, a guia lista suas anotações existentes e permite excluí-las.

Há várias maneiras de adicionar uma anotação:

• Rotular um item: para rotular um item no rastreamento de desempenho, clique duas vezes no item, insira o rótulo na caixa de texto e pressione Enter.

• Conecte dois itens: para desenhar uma seta entre dois itens no rastreamento de desempenho, clique duas vezes no primeiro item, clique no ícone de seta ao lado dele e clique no segundo item.

• Rotular um intervalo de tempo: para desenhar e rotular um intervalo de tempo arbitrário no rastreamento de desempenho, mantenha pressionada a tecla Shift e arraste do início de um intervalo de tempo até o fim, insira o rótulo na caixa de texto exibida e pressione Enter.

Por exemplo, abra a página da Web Demonstração de guias de atividade em uma nova janela ou guia, crie uma gravação de desempenho e execute as três ações acima. Resultado:

Neste exemplo, há:

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

A guia Anotações mostra o número de anotações ao lado do nome da guia; Neste exemplo, 5.

Para excluir uma anotação, passe o mouse sobre ela na guia Anotações e clique no botão Excluir ao lado dela.

Para ocultar anotações do rastreamento de desempenho, selecione Ocultar anotações na parte inferior da guia Anotações .

Salvar e compartilhar uma gravação

Para salvar uma gravação como um arquivo em seu dispositivo e depois compartilhá-la com suas descobertas de desempenho anotadas, na barra de ações na parte superior da ferramenta Desempenho , clique no botão Salvar perfil () e selecione Salvar rastreamento.

Como alternativa, selecione Salvar rastreamento sem anotações.

Em vez de clicar no botão Salvar perfil () na parte superior, você pode clicar com o botão direito do mouse em uma faixa de uma gravação e selecionar Salvar perfil:

Carregar uma gravação

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

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

Ou clique com o botão direito do mouse na ferramenta Desempenho e selecione Carregar perfil:

Você pode clicar com o botão direito do mouse em uma gravação existente ou na tela exibida na ferramenta Desempenho quando não houver gravações.

Limpar a gravação anterior

Depois de fazer uma gravação, para removê-la da ferramenta Desempenho , clique no botão Limpar gravação ():

Analisar uma gravação de desempenho

Depois de gravar o desempenho do tempo de execução ou registrar o desempenho da carga, a ferramenta Desempenho exibe muitos dados sobre a gravação. Use os dados gravados para analisar o desempenho de sua página da Web.

Obtenha insights acionáveis

A ferramenta Desempenho extrai insights acionáveis dos dados de desempenho registrados. Esses insights são maneiras pelas quais você pode melhorar o desempenho do seu site. Os insights incluem:

• INP por fase
• LCP por fase
• Descoberta de solicitação LCP
• Culpados de mudança de layout
• Solicitação de bloqueio de renderização
• Árvore de dependência de rede
• Melhorar a entrega de imagens
• Latência de solicitação de documento
• Exibição de fonte
• Otimizar visor para celular
• Otimizar o tamanho do DOM
• Terceiros
• Custos do seletor de CSS
• Refluxo forçado
• Usar tempos de vida de cache eficientes

Os insights estão focados em melhorar as métricas do Core Web Vitals e na otimização da rapidez com que a página da Web é carregada e renderizada.

Depois de registrar um perfil na ferramenta Desempenho , a guia Insights na barra lateral mostra a lista de insights acionáveis que se aplicam aos dados de desempenho registrados. Para exibir a lista de insights que não se aplicam ao perfil, consulte a seção Insights aprovados .

Para usar os insights:

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

2. Na barra lateral esquerda da ferramenta Desempenho , selecione a guia Insights , expanda diferentes seções, passe o mouse e clique nos itens. A ferramenta Desempenho realça os eventos correspondentes no rastreamento:

   

   Se a barra lateral e a guia Insights não estiverem visíveis, clique no botão Mostrar barra lateral ().

Navegar pela gravação

Para inspecionar de perto sua gravação de desempenho, você pode selecionar uma parte de uma gravação, rolar um longo gráfico de chamas, aumentar e diminuir o zoom e usar trilhas para pular entre os níveis de zoom.

Use atalhos de teclado para navegar

Para usar atalhos de teclado para navegar rapidamente na gravação, primeiro escolha seu estilo preferido de navegação pelo teclado, da seguinte maneira:

• No canto superior direito da ferramenta Desempenho , clique no botão Mostrar atalhos () e selecione o botão de opção Moderno ou Clássico .

  A caixa de diálogo Atalhos de teclado exibe os atalhos disponíveis para a opção de mapeamento selecionada.

Quando o botão de opção Moderno é selecionado:

• Para ampliar: Command/Ctrl + roda do mouse.
• Para rolagem vertical: roda do mouse.
• Para rolar horizontalmente: Shift + roda do mouse.

Quando o botão de opção Clássico é selecionado:

• Para ampliar: roda do mouse ou touchpad para cima ou para baixo.
• Para rolar verticalmente: Shift + roda do mouse.
• Para rolar horizontalmente: Shift + Seta |para a esquerdaSeta para a direita

Atalhos adicionais:

• Aplicar zoom, pressionando W ou S.

• Panorâmica para a esquerda e para a direita, pressionando A ou D.

Selecionar uma parte de uma gravação

Na parte superior da gravação, a seção Visão geral da linha do tempo é exibida, incluindo os gráficos de CPU e NET (indicados à direita):

Para selecionar uma parte de uma gravação, na visão geral da Linha do Tempo, clique e arraste horizontalmente:

Para selecionar uma parte usando o teclado:

1. Concentre a trilha principal ou qualquer uma de suas vizinhas.

2. Use as teclas W, A, S, D para ampliar o zoom, mover para a esquerda, reduzir o zoom e mover para a direita, respectivamente.

Para selecionar uma parte usando um trackpad:

1. Passe o mouse sobre a seção Visão geral da linha do tempo ou qualquer uma das faixas (Principal e seus vizinhos).

2. Usando dois dedos, deslize o dedo para cima para reduzir o zoom, deslize o dedo para a esquerda para mover para a esquerda, deslize o dedo para baixo para aumentar o zoom e deslize para a direita para mover para a direita.

Você pode selecionar uma parte de uma gravação usando um mouse, teclado ou trackpad.

Mouse:

Para selecionar uma parte de uma gravação usando o mouse:

• Arraste o mouse para a esquerda ou para a direita na Visão geral. A Visão geral é a seção que contém os gráficos CPU e NET :

Para rolar um longo gráfico de chamas na seção Principal ou em qualquer uma das seções vizinhas, clique e segure 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 usando o teclado:

1. Selecione o plano de fundo da seção Principal ou selecione o plano de fundo de uma seção que esteja ao lado da seção Principal, como Interações, Rede ou GPU. Este fluxo de trabalho de teclado só funciona quando uma dessas seções está em foco.

2. Pressione W ou S para aumentar ou diminuir o zoom. Pressione A ou D para mover para a esquerda ou para a direita.

Trackpad:

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

1. Passe o mouse sobre a seção Visão geral ou a seção Detalhes . A seção Visão geral é a área que contém os gráficos FPS, CPU e NET . A seção Detalhes é a área que contém a seção Principal e a seção Interações .

2. Usando dois dedos, deslize o dedo para cima para reduzir o zoom ou para baixo para ampliar. Usando dois dedos, deslize o dedo para a esquerda para mover para a esquerda ou para a direita para mover para a direita.

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

A visão geral da Linha do Tempo permite ampliar partes da gravação em sucessão e criar trilhas a cada etapa, permitindo que você alterne entre esses níveis de zoom.

Para ampliar uma parte da sua gravação e usar trilhas:

1. Em Visão geral da linha do tempo, selecione uma parte da gravação (acima).

2. Passe o mouse sobre a seleção e clique no botão N ms ():

   

   A seleção se expande para preencher a visão geral da Linha do Tempo. Uma cadeia de trilhas começa a ser construída na parte superior da visão geral da Linha do Tempo.

3. Repita as duas etapas anteriores para criar outra trilha aninhada. Você pode continuar a aninhar trilhas de navegação, desde que o intervalo de seleção seja maior que 5 milissegundos.

4. Para saltar para um nível de zoom escolhido, clique na trilha correspondente na cadeia na parte superior da visão geral da Linha do tempo.

Para remover os filhos de uma trilha, clique com o botão direito do mouse na trilha pai e selecione Remover trilhas filho:

Rolar um longo gráfico de chamas

Para rolar um longo gráfico de chamas na trilha principal ou em qualquer um de seus vizinhos, clique e segure e arraste em qualquer direção até que o que você está procurando apareça.

Pesquisar atividades

Você pode pesquisar entre as atividades na faixa principal e as solicitações na faixa de rede .

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

1. Pressione Ctrl+F (Windows, Linux) ou Command+F (macOS).

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

   

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

   As atividades de correspondência são realçadas na seção Principal à medida que você digita e o número total de correspondências é exibido na caixa de pesquisa. A primeira atividade correspondente é selecionada, destacada em azul:

   

Para navegar entre as atividades que correspondem à sua consulta:

• Para selecionar a próxima atividade, pressione Enter ou clique no botão Next ().

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

A ferramenta Desempenho mostra uma dica de ferramenta sobre a atividade selecionada na caixa de pesquisa.

Para modificar as configurações de consulta:

• Para usar uma expressão regular em sua consulta, clique no botão Habilitar expressões regulares ( Se você selecionar o botão Regex e, em seguida, entrar, ^E.* isso encontrará qualquer atividade que qualquer atividade que comece com a letra E.

• Para diferenciar maiúsculas de minúsculas na consulta, clique no botão Habilitar pesquisa que diferencia maiúsculas de minúsculas (

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

Alterar a ordem das faixas e ocultá-las

Para organizar o rastreamento de desempenho, você pode alterar a ordem das faixas e ocultar as irrelevantes no modo de configuração de faixa.

Para mover e ocultar faixas:

1. Para entrar no modo de configuração, clique com o botão direito do mouse no nome de uma faixa e 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 mouse na trilha e selecione Concluir configuração.

A ferramenta Desempenho também aplica sua configuração de rastreamento a novos rastreamentos, a menos que você feche e abra novamente o DevTools.

Exibir atividade do thread principal

Use a seção Principal para exibir a atividade que ocorreu no thread principal da página:

Selecione um evento para exibir mais informações sobre ele na guia Resumo . O DevTools descreve o evento selecionado:

O DevTools representa a atividade do thread principal com um gráfico de degradê:

O eixo x representa a gravação ao longo do tempo. O eixo y representa a pilha de chamadas. Um evento que está próximo do topo causa os eventos que estão abaixo dele; Por exemplo, na figura anterior, um input evento causou um Function Call, que executou uma função anônima que chamava filterByCamera e depois populateGallery. Em seguida, a populateGallery função fez alterações no DOM chamando set innerHTML.

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

Se você quiser ocultar o gráfico de chamas detalhado das solicitações JavaScript, consulte Desabilitar exemplos de JavaScript, acima. Quando os exemplos de JavaScript são desabilitados, somente eventos de alto nível são exibidos, como Event: input e Function Call da figura anterior.

Leia o gráfico de degradê

A ferramenta Desempenho representa a atividade do thread principal em um gráfico de degradê. 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 quebrar o gráfico de degradê e torná-lo mais legível.

Tarefas longas também são destacadas com um triângulo vermelho e com a parte com mais de 50 milissegundos sombreada em vermelho.

Além disso, a faixa principal mostra informações sobre os perfis de CPU iniciados e interrompidos com profile() as funções do profileEnd() console.

Para ocultar o gráfico de chamas detalhado das chamadas JavaScript, consulte Desabilitar exemplos de JavaScript. Quando as amostras JS estão desativadas, você vê apenas os eventos de alto nível, como Event (click) e Function Call.

Acompanhar iniciadores de eventos

A faixa principal pode mostrar setas que conectam os seguintes iniciadores e os eventos que eles causaram:

• Invalidação de estilo ou layout ->Recalcular estilos ou layout
• Solicitar quadro de animação ->Quadro de animação disparado
• Solicitar retorno de chamada ocioso ->Fire retorno de chamada ocioso
• Instalar temporizador ->temporizador disparado
• Criar WebSocket ->Enviar... e Receber WebSocket Handshake ou Destruir WebSocket
• Schedule postTask ->Fire postTask ou Abort postTask

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

Quando selecionada, a guia Resumo mostra Iniciador para links para iniciadores e Iniciado por links para os eventos que eles causaram. Clique neles para alternar entre os eventos correspondentes.

Ocultar funções e seus filhos no gráfico de degradê

Para organizar o gráfico de chamas no thread principal , você pode ocultar funções selecionadas ou seus filhos:

1. Na faixa principal , clique com o botão direito do mouse em uma função e escolha uma das seguintes opções ou pressione o atalho correspondente:

   • Função Ocultar (H)
   • Ocultar filhos (C)
   • Ocultar filhos repetidos (R)
   • Redefinir filhos (U)
   • Redefinir rastreamento (T)
   • Adicionar script à lista de ignorados (I)

   Um botão suspenso oculto de número () aparece ao lado do nome da função com filhos ocultos.

2. Para ver o número de filhos ocultos, passe o mouse sobre o botão suspenso de números ocultos ().

3. Para redefinir uma função com filhos ocultos ou todo o gráfico de chamas, selecione a função e pressione U ou clique com o botão direito do mouse em qualquer função e selecione Redefinir rastreamento , respectivamente.

Ignorar scripts no gráfico de degradê

Para adicionar um script à lista de ignorados, clique com o botão direito do mouse em um script no gráfico e selecione Adicionar script à lista de ignorados.

O gráfico recolhe scripts ignorados, marca-os como Na lista de ignorados e os adiciona às regras de exclusão personalizadas em Personalizar e controlar o DevTools () >Lista de configurações>ignoradas. Os scripts ignorados são salvos até que você os remova do rastreamento ou das regras de exclusão personalizadas.

Exibir atividades em uma tabela

Depois de gravar uma página, além da seção principal para analisar as atividades, o DevTools também fornece três exibições tabulares para analisar as atividades. Cada modo de exibição oferece uma perspectiva diferente sobre as atividades:

• Para exibir as atividades em que a maior parte do tempo foi gasto diretamente, use a guia De baixo para cima .

• Para exibir as atividades raiz que causam mais trabalho, use a guia Árvore de chamadas .

• Para exibir as atividades na ordem em que ocorreram durante a gravação, use a guia Log de eventos .

Para ajudá-lo a encontrar o que procura com mais rapidez, todas as três guias têm botões para filtragem avançada ao lado da barra Filtro :

• O botão Habilitar expressões regulares (

• O botão Habilitar pesquisa que diferencia maiúsculas de minúsculas (

Cada exibição tabular na ferramenta Desempenho mostra links para atividades como chamadas de funções. Para ajudá-lo a depurar, o DevTools localiza as declarações de função correspondentes nos arquivos de origem. Além disso, se os mapas de origem apropriados estiverem presentes e habilitados, o DevTools localizará automaticamente os arquivos originais.

Clique em um link para abrir um arquivo de origem na ferramenta Fontes .

As próximas três seções referem-se à mesma demonstração. Você mesmo pode executar a demonstração em Demonstração das Guias de Atividades e ver o código-fonte em MicrosoftEdge / Demos > /devtools-performance-activitytabs/.

Atividades raiz

Aqui está uma explicação do conceito de atividades raiz mencionado nas seções Árvore de Chamadas , Ascendente e Log de Eventos .

As atividades raiz são atividades que fazem com que o navegador faça algum trabalho. Por exemplo, quando você clica em uma página da Web, o navegador executa uma Event atividade como a atividade raiz. Essa atividade pode fazer com que Event outras atividades sejam executadas, como um manipulador.

No gráfico de chamas da seção Principal , as atividades raiz estão na parte superior do gráfico. Nas guias Árvore de chamadas e Log de eventos , as atividades raiz são os itens de nível superior.

Para obter um exemplo de atividades raiz, consulte a guia Árvore de chamadas, abaixo.

A guia Árvore de chamadas

Use a guia Árvore de chamadas para exibir quais atividades raiz causam mais trabalho.

A guia Árvore de chamadas exibe apenas 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 raiz. O aninhamento representa a pilha de chamadas. Por exemplo, na figura anterior, Event Timing causou Event: mouseup, que causou , que causou Function Call(anonymous), e assim por diante.

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

Clique em Auto-tempo, Tempo total ou Atividade para classificar a tabela por essa coluna.

Use a caixa de texto Filter para filtrar os eventos por nome da atividade.

Por padrão, o menu Agrupamento é definido como Sem Agrupamento. Use o menu Agrupamento para classificar a tabela de atividades com base em vários critérios.

Clique em Mostrar a Pilha Mais Pesada () para revelar outra tabela à direita da tabela Atividade . Clique em uma atividade para preencher a tabela de pilha mais pesada . A tabela Pilha Mais Pesada exibe quais filhos da atividade selecionada levaram mais tempo para serem executados.

A guia De baixo para cima

Use a guia De baixo para cima para exibir quais atividades ocuparam mais tempo diretamente no agregado.

A guia De baixo para cima exibe apenas as 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 chamas da seção principal da figura anterior, quase todo o tempo foi gasto executando as afunções , b, e c . As atividades superiores na guia Ascendente da figura anterior também asão , b, e c. Na guia Ascendente , a próxima atividade mais cara é Minor GC.

A coluna Self Time representa o tempo agregado gasto diretamente nessa atividade, em todas as ocorrências.

A coluna Tempo Total representa o tempo agregado gasto nessa atividade ou em qualquer um dos filhos.

A guia Log de eventos

Use a guia Log de eventos para exibir as atividades na ordem em que ocorreram durante a gravação.

A guia Log de eventos exibe apenas 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 a atividade começou, em relação 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 próprio representa o tempo gasto diretamente nessa atividade.

A coluna Tempo Total representa o tempo gasto diretamente nessa atividade ou em qualquer um dos filhos.

Clique no título da coluna Hora de Início, Auto-Hora ou Tempo Total para classificar a tabela por essa coluna.

Use a caixa de texto Filtro para filtrar as atividades por nome.

Use o menu Duração para filtrar as atividades que levaram menos de 1 ms ou 15 ms. Por padrão, o menu Duração é definido como Todos, o que significa que todas as atividades são mostradas.

Desmarque as caixas de seleção Carregamento, Criação de script,Renderização ou Pintura para filtrar todas as atividades dessas categorias.

Exibir marcadores de desempenho

Em uma sobreposição com linhas verticais ao longo do traço de desempenho, você pode ver marcadores de desempenho importantes, como:

• First Paint (FP)
  • First Paint (FP) em Glossário no MDN.
• First Contentful Paint (FCP)
  • First Contentful Paint (FCP) no Glossário do MDN.
  • PerformancePaintTiming no MDN.
• Largest Contentful Paint (LCP)
  • Largest Contentful Paint (LCP) no glossário do MDN.
  • LargestContentfulPaint no MDN.
• Evento DOMContentLoaded (DCL)
  • Evento DOMContentLoaded (DCL) no MDN.
• Evento Onload (L)
  • Evento Onload (L) no MDN.

Passe o mouse sobre o nome de um marcador na parte inferior do rastreamento para ver seu carimbo de data/hora.

Exibir intervalos personalizados

Na faixa de Intervalos , exiba seus marcadores de desempenho personalizados, como:

• performance.mark() chamadas.

• performance.measure() chamadas.

Selecione um marcador para ver mais detalhes na guia Resumo , incluindo seu carimbo de data/hora, tempo total, tempo próprio e o detail objeto. Para performance.mark() chamadas and performance.measure() , a guia também mostra rastreamentos de pilha.

Exibir interações

Use a seção Interações para localizar e analisar as interações do usuário que ocorreram durante a gravação:

Uma linha vermelha na parte inferior de uma interação representa o tempo gasto aguardando o thread principal.

Clique em uma interação para exibir mais informações sobre ela na guia Resumo .

Exibir turnos de layout

Exiba as mudanças de layout na faixa Mudanças de layout. Os turnos são mostrados como losangos roxos e são agrupados em grupos (linhas roxas) com base em sua proximidade na linha do tempo.

Para destacar um elemento que causou uma mudança de layout na viewport, passe o mouse sobre o losango correspondente.

Para ver mais informações sobre uma mudança ou turnos de layout na guia Resumo com intervalos, pontuações, elementos e possíveis culpados, clique no losango ou cluster correspondente.

Para obter mais informações, consulte CLS (Cumulative Layout Shift) no MDN.

Exibir animações

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

Selecione uma animação para ver mais detalhes na guia Resumo , incluindo os motivos das falhas de composição.

Exibir atividade da GPU

Exiba a atividade da GPU na seção GPU da ferramenta Desempenho :

Exibir atividade de varredura

Exiba a atividade de varredura na seção Pool de threads .

Analisar quadros por segundo (FPS)

O DevTools fornece duas maneiras de analisar quadros por segundo:

• Use a seção Quadros para ver quanto tempo um determinado quadro levou. Veja a seção Frames, abaixo.

• Use o medidor de FPS para obter uma estimativa em tempo real de FPS durante a execução da página. Veja Ver quadros por segundo em tempo real com o medidor de FPS, abaixo.

A seção Quadros

A seção Quadros informa exatamente quanto tempo um determinado quadro levou.

Passe o mouse sobre um quadro para exibir uma dica de ferramenta com mais informações sobre ele:

O exemplo acima mostra uma dica de ferramenta quando você passa o mouse sobre um quadro.

A seção Quadros pode mostrar quatro tipos de quadros:

• Quadro ocioso (branco). Sem alterações.

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

• Quadro parcialmente apresentado (amarelo com um padrão de linha tracejada larga e esparsa). O Microsoft Edge fez o possível para renderizar pelo menos algumas atualizações visuais a tempo. Por exemplo, caso o trabalho do thread principal do processo de renderização (animação de tela) esteja atrasado, mas o thread do compositor (rolagem) esteja no tempo.

• Quadro descartado (vermelho com um padrão de linha sólida densa). O Microsoft Edge não pode renderizar o quadro em tempo razoável.

Clique em um quadro para exibir mais informações sobre o quadro na guia Resumo na parte inferior da ferramenta Desempenho . O DevTools descreve o quadro selecionado em azul:

Exibir solicitações de rede

Expanda a seção Rede para exibir uma cascata de solicitações de rede que ocorreram durante a gravação:

Clique em uma solicitação para exibir mais informações sobre ela na guia Resumo :

As solicitações na seção Rede são codificadas por cores da seguinte maneira:

• Tela de fundo azul: solicitação HTML.
• Tela de fundo roxa: solicitação CSS.
• Fundo amarelo escuro: solicitação JS.
• Fundo verde: solicitação de imagem.

As solicitações têm quadrados no canto superior esquerdo:

• Um quadrado azul mais escuro no canto superior esquerdo de uma solicitação significa que é uma solicitação de prioridade mais alta.
• Um quadrado azul mais claro significa prioridade mais baixa.

Por exemplo, na figura anterior, a solicitação de galeria de fotos , no canto superior esquerdo da seção Rede , é de prioridade mais alta.

As solicitações podem ter linhas nos lados esquerdo e direito, e suas barras podem ser divididas em duas cores. Aqui está o que essas linhas e cores representam:

• A linha da esquerda é tudo até o Connection Start grupo de eventos, inclusive. Em outras palavras, é tudo antes Request Sent, exclusivo.

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

• A parte escura da barra é Content Download.

• A linha da direita é essencialmente o tempo gasto aguardando o thread principal. Isso não é representado na guia Intervalo .

Exibir métricas de memória

Marque a caixa de seleção Memória para exibir métricas de memória em uma gravação de desempenho:

O DevTools exibe um gráfico de Memória, acima da guia Resumo. Há também um gráfico abaixo do gráfico NET, chamado HEAP. O gráfico HEAP fornece as mesmas informações que a linha JS Heap no gráfico Memória :

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

O gráfico exibe apenas a região da gravação que está selecionada no momento. Por exemplo, na figura anterior, o gráfico de memória só mostra o uso de memória de cerca da marca de 3600 ms até a marca de 6200 ms.

Veja também:

• Visualizar vazamentos de memória (ferramenta Desempenho: caixa de seleção Memória), abaixo.

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

Ao analisar uma seção como Rede ou Principal, às vezes você precisa de uma estimativa mais precisa de quanto tempo certos eventos levaram. Mantenha pressionada a tecla Shift, clique e segure e arraste para a esquerda ou direita para selecionar uma parte da gravação. Na parte inferior da seleção, o DevTools mostra quanto tempo essa parte levou:

Exibir uma captura de tela

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

Para exibir uma captura de tela da aparência da página durante o momento da gravação, passe o mouse sobre a Visão geral. A Visão geral é a seção que contém os gráficos CPU e NET :

Você também pode exibir capturas de tela selecionando um quadro na seção Quadros . O DevTools exibe uma versão pequena da captura de tela na guia Resumo :

Para ampliar a captura de tela, clique na miniatura na guia Resumo .

Exibir informações de camadas

Para exibir informações de camadas avançadas sobre um quadro:

1. Na ferramenta Desempenho, clique no botão Configurações de Captura () e marque a caixa de seleção Habilitar instrumentação de renderização avançada (lenta).

2. Na seção Quadros , selecione um quadro. O DevTools exibe informações sobre as camadas na guia Camadas na parte inferior da ferramenta Desempenho :

   

A guia Camadas funciona como a guia Camadas compostas na ferramenta Exibição 3D . Para saber como interagir com a guia Camadas , consulte Navegar pelas camadas da página da web, z-index e DOM usando a ferramenta Exibição 3D.

Exibir perfil de pintura

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

1. Na ferramenta Desempenho, clique no botão Configurações de Captura () e marque a caixa de seleção Habilitar instrumentação de renderização avançada (lenta).

2. Selecione um evento do Paint na seção principal . O DevTools exibe informações sobre o evento paint na guia Paint Profiler :

   

Exibir estatísticas do seletor de CSS

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

• Na ferramenta Desempenho, clique no botão Configurações de Captura () e marque a caixa de seleção Habilitar instrumentação de renderização avançada (lenta).

  O DevTools exibe informações agregadas sobre os seletores das regras CSS que foram recalculadas durante a gravação na guia Estatísticas do Seletor :

  

1. Na seção Principal , selecione um evento Recalcular estilo . Na guia Estatísticas do Seletor , o DevTools exibe informações sobre os seletores das regras CSS que foram recalculadas durante esse evento.

Veja também:

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

Exibir mensagens entre janelas, iframes e trabalhadores dedicados

O experimento do DevTools Painel Desempenho: mostrar fluxos de despacho e tratamento de postMessage melhora a seção Principal da ferramenta Desempenho para ajudá-lo a identificar postMessage rapidamente eventos e manipuladores, distinguindo eventos disparados pelo postMessage método de outros eventos exibidos na ferramenta Desempenho. Esse experimento ajuda você a investigar problemas de desempenho relacionados à postagem de mensagens em vários threads de um aplicativo.

Sem esse experimento, os eventos disparados pelo despacho e tratamento de mensagens entre threads de um aplicativo aparecem como eventos genéricos de chamada de função de script. Com este experimento habilitado:

• postMessage dispatch aparecem como Schedule postMessage.
• postMessage handler events aparecem como On Message:

Esse experimento ajuda você a investigar quando ocorreu uma postMessage chamada e por quanto tempo a mensagem foi enfileirada antes que o postMessage manipulador seja iniciado. Os eventos de expedição são vinculados aos eventos do manipulador por setas de iniciador que aparecem quando você clica em qualquer tipo de evento:

Para usar esse recurso, no DevTools, selecione Personalizar e controlar o DevTools () >Configurações>Experimentos, marque a caixa de seleção Painel Desempenho: mostrar postMessage fluxos de despacho e tratamento, 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 Rastreamento postMessage (renderizados)
• Demonstração de Eventos de Rastreamento postMessage (código-fonte)

Exibir mensagens do WebSocket

As atividades do WebSocket são exibidas na trilha de Rede na ferramenta Desempenho , para ajudar a correlacionar a atividade do JavaScript com mensagens do WebSocket. Isso pode ajudar a identificar se os problemas de latência estão provenientes da análise de uma mensagem pelo cliente ou da resposta do servidor.

Para exibir mensagens do WebSocket na ferramenta Desempenho :

1. Vá para uma página da Web que envia mensagens WebSocket, como o aplicativo de chat simples, em uma nova janela ou guia.

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

   O DevTools é aberto.

3. Na Barra de Atividades, selecione a ferramenta Desempenho ().

4. No canto superior esquerdo da ferramenta Desempenho , clique no botão Gravar ().

5. Na página do chat, na caixa de texto Nome de usuário , digite um nome, como "John", e clique no botão Conectar .

   Na parte inferior do formulário de bate-papo, uma mensagem é exibida, como "John:v8g... conectados."

6. Na caixa de texto Enviar uma mensagem , digite uma mensagem, como "Olá", e clique no botão Enviar .

   No aplicativo de chat, a mensagem é exibida, como "Olá":

   

   WebSocket é gerado.

7. No canto superior esquerdo da ferramenta Desempenho , clique no botão Parar ().

   Ou, no meio da ferramenta Desempenho , clique no botão Parar .

   Na ferramenta Desempenho, o linha do tempo é exibido.

8. Expanda a trilha de Rede .

9. Clique em uma linha dourada vertical.

10. Na parte inferior da ferramenta Desempenho , na guia Resumo , são exibidas informações sobre a mensagem WebSocket selecionada, como:

    • Enviar handshake do WebSocket
    • Receber handshake do WebSocket
    • Receber mensagem WebSocket:

    

Veja também:

• Analise as mensagens de uma conexão WebSocket em Referência de recursos de rede.
• Acompanhar iniciadores de eventos, acima.
• Analisar o desempenho do tempo de execução (tutorial)

Analisar o desempenho da renderização com a ferramenta Renderização

Use a ferramenta Renderização para ajudar a visualizar o desempenho de renderização da sua página. A ferramenta Renderização é uma ferramenta de Visualização Rápida ; se você abri-lo no Menu de Comando, ele será aberto na parte inferior do DevTools.

Para abrir a ferramenta Renderização :

1. Abra uma página da Web, como Animação Lenta, em uma nova janela ou guia.

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

   O DevTools é aberto.

3. Se o painel Visualização Rápida não for mostrado, selecione Personalizar e controlar o DevTools () >Alternar o painel de Visualização Rápida.

   Ou pressione Esc.

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

   A ferramenta Renderização é aberta no painel Visualização rápida :

   

Veja 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

Visualize quadros por segundo em tempo real com o medidor de FPS

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

1. Abra a ferramenta Renderização . Consulte Analisar o desempenho de renderização com a ferramenta Renderização, acima.

2. Marque a caixa de seleção Estatísticas de renderização de quadros . A sobreposição do medidor de FPS aparece na página da Web renderizada:

   

Veja eventos de pintura em tempo real com o Paint Flashing

Use o Paint Flashing para obter uma exibição em tempo real de todos os eventos de pintura na página. Sempre que uma parte da página é repintada, o DevTools descreve essa seção em verde.

Para ativar o Paint Flashing:

1. Abra a ferramenta Renderização . Consulte Analisar o desempenho de renderização com a ferramenta Renderização, acima.

2. Marque a caixa de seleção Pintar piscando . Contornos verdes aparecem na página da Web renderizada:

   

Exibir uma sobreposição de camadas com bordas de camada

Para exibir uma sobreposição de bordas de camada e blocos na parte superior da página:

1. Abra a ferramenta Renderização , conforme descrito em Analisar o desempenho da renderização com a ferramenta Renderização, acima.

2. Marque a caixa de seleção Bordas da camada . As bordas de camada aparecem na página da Web renderizada:

   

Veja os comentários em debug_colors.cc para obter uma explicação sobre os códigos de cores.

Encontrar problemas de desempenho de rolagem em tempo real

Use a caixa de seleção Problemas de desempenho de rolagem para identificar elementos da página que têm ouvintes de eventos relacionados à rolagem que podem prejudicar o desempenho da página. O DevTools descreve os elementos potencialmente problemáticos no azul-petróleo.

Para exibir problemas de desempenho de rolagem:

1. Abra a ferramenta Renderização , conforme descrito em Analisar o desempenho da renderização com a ferramenta Renderização, acima.

2. Marque a caixa de seleção Problemas de desempenho de rolagem . Elementos potencialmente problemáticos são descritos:

   

Veja também:

• Scroll rects lentos (caixa de seleção) em Navegue pelas camadas da página da Web, z-index e DOM usando a ferramenta 3D View.

Desabilitar fontes locais

Na ferramenta Renderização , use a caixa de seleção Desabilitar fontes locais para emular fontes ausentes local() nas @font-face regras.

Por exemplo, quando a fonte Rubik estiver instalada em seu dispositivo e a @font-face src regra a usar como fonte local() , o Microsoft Edge usará o arquivo de fonte local do seu dispositivo.

Quando Desabilitar fontes locais está selecionado, o DevTools ignora as local() fontes e busca cada fonte na rede:

Esse recurso é útil se você usar duas cópias diferentes da mesma fonte durante o desenvolvimento, como:

• Uma fonte local para suas ferramentas de design.
• Uma fonte da Web para o seu código.

Use Desabilitar fontes locais para facilitar:

• Depure e meça o desempenho de carregamento e a otimização de fontes da Web.
• Verifique a precisão de suas regras CSS @font-face .
• Descubra as diferenças entre as versões locais instaladas em seu dispositivo e uma fonte da Web.

Visualizar vazamentos de memória (ferramenta Desempenho: caixa de seleção Memória)

Como ponto de partida para investigar o uso de memória da página da Web, use a caixa de seleção Memória da ferramenta Desempenho. ( Ou Monitorar o uso de memória em tempo real (Gerenciador de tarefas do navegador).)

A ferramenta Desempenho ajuda você a visualizar o uso da memória de uma página ao longo do tempo.

1. No DevTools, abra a ferramenta Desempenho .

2. Marque a caixa de seleção Memória .

3. Faça uma gravação, por Recorde de desempenho, acima.

É uma boa prática começar e terminar sua gravação com uma coleta forçada de lixo. Para forçar a coleta de lixo, clique no botão coletar lixo 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);

Toda vez que o botão referenciado no código é clicado, 10.000 div nós são anexados ao corpo do documento e uma cadeia de caracteres de 1.000.000 x caracteres é enviada para a x matriz. A execução do código anterior produz uma gravação na ferramenta Desempenho :

Primeiro, uma explicação da interface do usuário. O gráfico HEAP no painel Visão geral (abaixo do NET) representa o heap JS. Abaixo do painel Visão Geral , encontra-se o painel Contador . O uso de memória é dividido por heap JS (igual ao gráfico HEAP no painel Visão geral ), documentos, nós DOM, ouvintes e memória GPU. Desmarque uma caixa de seleção para ocultá-la do gráfico.

Agora, uma análise do código em comparação com a figura anterior. Se você revisar o contador de nós (o gráfico verde), ele corresponderá perfeitamente ao código. A contagem de nós aumenta em etapas discretas. Você pode presumir que cada aumento na contagem de nós é uma chamada para grow().

O gráfico de heap JS (o gráfico azul) não é tão simples. De acordo com as práticas recomendadas, o primeiro mergulho é, na verdade, uma coleta de lixo forçada (clique no botão coletar coleta ).

À medida que a gravação avança, os picos de tamanho de heap JS são exibidos. Isso é natural e esperado: o código JavaScript está criando os nós DOM em cada botão que você clica e está fazendo muito trabalho quando cria a sequência de um milhão de caracteres.

O principal aqui é o fato de que o heap JS termina mais alto do que começou (o "começo" aqui é o ponto após a coleta de lixo forçada). No mundo real, se você visse esse padrão de aumento do tamanho do heap JS ou do tamanho do nó, isso indicaria potencialmente um vazamento de memória.

Veja também:

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

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