Referência dos recursos de desempenho

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

Consulte Introdução à análise do desempenho em tempo de execução para ver um tutorial guiado sobre como analisar o desempenho de uma página usando o Chrome DevTools.

Gravar desempenho

Você pode gravar o tempo de execução ou o desempenho do carregamento.

Gravar o desempenho da execução

Registre o desempenho do tempo de execução quando você quiser analisar o desempenho de uma página durante a execução, em vez do carregamento.

1. Acesse a página que você quer analisar.
2. Clique na guia Desempenho no DevTools.

3. Clique em Record .

   

4. Interaja com a página. O DevTools registra todas as atividades da página que ocorrem como resultado das suas interações.

5. Clique em Gravar novamente ou em Parar para interromper a gravação.

Gravar desempenho de carregamento

Registre o desempenho de carregamento quando você quiser analisar o desempenho de uma página durante o carregamento, em vez da execução.

1. Acesse a página que você quer analisar.
2. Abra o painel Desempenho do DevTools.

3. Clique em Iniciar criação de perfil e atualizar a página . Primeiro, o DevTools navega até about:blank para limpar todas as capturas de tela e rastros restantes. Em seguida, o DevTools registra métricas de desempenho enquanto a página é recarregada e, em seguida, interrompe automaticamente a gravação alguns segundos após o carregamento terminar.

   

O DevTools aumenta o zoom automaticamente na parte da gravação em que ocorreu a maior parte da atividade.

Nesse exemplo, o painel Desempenho mostra a atividade durante um carregamento de página.

Fazer capturas de tela durante a gravação

Ative a caixa de seleção Capturas de tela para capturar cada frame durante a gravação.

Consulte Conferir uma captura de tela para saber como interagir com elas.

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

Enquanto estiver gravando uma página, clique em Collect lixeira mop para forçar a coleta de lixo.

Mostrar configurações de gravação

Clique em Capture settings para expor mais configurações relacionadas à forma como o DevTools captura as gravações de performance.

Desativar amostras de JavaScript

Por padrão, a faixa Main de uma gravação mostra pilhas de chamadas detalhadas de funções JavaScript que foram chamadas durante a gravação. Para desativar essas pilhas de chamadas:

1. Abra o menu Configurações de captura . Consulte Mostrar configurações de gravação.
2. Marque a caixa de seleção Disable JavaScript Samples.
3. Faça uma gravação da página.

As capturas de tela a seguir mostram a diferença entre desativar e ativar amostras de JavaScript. A faixa Main da gravação fica muito mais curta quando a amostragem está desativada, porque omite todas as pilhas de chamadas do JavaScript.

Este exemplo mostra uma gravação com amostras de JS desativadas.

Este exemplo mostra uma gravação com amostras de JS ativadas.

Limitar a rede durante a gravação

Para limitar a rede durante a gravação:

1. Abra o menu Configurações de captura . Consulte Mostrar configurações de gravação.
2. Defina Rede como o nível de limitação escolhido.

Limitar a CPU durante a gravação

Para limitar a CPU durante a gravação:

1. Abra o menu Configurações de captura . Consulte Mostrar configurações de gravação.
2. Defina a CPU com o nível de limitação escolhido.

A limitação está relacionada aos recursos do seu computador. Por exemplo, a opção 2x lentidão faz com que a CPU opere duas vezes mais lentamente do que a capacidade normal. O DevTools não consegue simular de verdade as CPUs de dispositivos móveis, porque a arquitetura dos dispositivos móveis é muito diferente daquela de computadores e laptops.

Ativar instrumentação de exibição avançada

Para conferir a instrumentação detalhada de pintura:

1. Abra o menu Configurações de captura . Consulte Mostrar configurações de gravação.
2. Marque a caixa de seleção Enable advanced paint instrumentation (Ativar instrumentação de pintura avançada).

Para aprender a interagir com as informações de pintura, consulte Ver camadas e Ver o perfil de pintura.

Emular a simultaneidade de hardware

Para testar o desempenho do aplicativo com diferentes números de núcleos de processador, configure o valor informado pela propriedade navigator.hardwareConcurrency. Alguns aplicativos usam essa propriedade para controlar o grau de paralelismo de seus aplicativos, por exemplo, para controlar o tamanho do pool de pthread Emscripten.

Para emular a simultaneidade de hardware:

1. Abra o menu Configurações de captura . Consulte Mostrar configurações de gravação.
2. Marque Simultaneidade de hardware e defina o número de núcleos na caixa de entrada.

O DevTools mostra um ícone de aviso ao lado da guia Performance para lembrar que a emulação de simultaneidade de hardware está ativada.

Para reverter para o valor padrão de 10, clique no botão Reverter .

Salvar uma gravação

Para salvar uma gravação, clique com o botão direito do mouse e selecione Save Profile.

Carregar uma gravação

Para carregar uma gravação, clique com o botão direito do mouse e selecione Load Profile.

Limpar a gravação anterior

Depois de fazer uma gravação, pressione ClearRecording para limpar essa gravação no painel Performance.

Analisar um registro de performance

Depois de gravar o desempenho do tempo de execução ou o desempenho do carregamento da gravação, o painel Desempenho fornece muitos dados para analisar o desempenho do que acabou de acontecer.

Navegar pela gravação

Para inspecionar melhor a gravação de apresentação, você pode selecionar uma parte dela, rolar um diagrama de chamas longo, aumentar e diminuir o zoom e usar a navegação estrutural para pular entre níveis de zoom.

Selecione uma parte da gravação

Na barra de ações do painel Desempenho e na parte superior da gravação, é possível ver a seção Visão geral da linha do tempo com os gráficos de CPU e NET.

Para selecionar uma parte de uma gravação, clique e segure, depois arraste para a esquerda ou para a direita na Visão geral da linha do tempo.

Para selecionar uma parte usando o teclado:

1. Focar na faixa Main ou em qualquer um dos vizinhos.
2. Use as teclas W, A, S, D para aumentar, mover para a esquerda, diminuir e mover para a direita, respectivamente.

Para selecionar uma parte usando um trackpad:

1. Passe o cursor sobre a seção Visão geral da linha do tempo ou sobre qualquer uma das faixas (Principal e as vizinhas).
2. Com dois dedos, deslize para cima para diminuir o zoom, para a esquerda para mover para a esquerda, para baixo para aumentar o zoom e para a direita para mover para a direita.

Crie navegação estrutural e alterne entre níveis de zoom

Com a Visão geral da linha do tempo, você pode criar várias localizações atuais aninhadas em sucessão, aumentando os níveis de zoom e pular para o nível escolhido.

Para criar e usar a navegação estrutural:

1. Em Visão geral da linha do tempo, selecione uma parte da gravação.
2. Passe o cursor sobre a seleção e clique no botão N ms zoom_in. A seleção se expande para preencher a Visão geral da linha do tempo. Uma cadeia de navegação estrutural começa a ser criada na parte superior da Visão geral da linha do tempo.
3. Repita as duas etapas anteriores para criar outra navegação estrutural aninhada. Você pode continuar aninhando navegação estrutural desde que o intervalo da seleção seja maior que cinco milissegundos.
4. Para pular até um nível de zoom escolhido, clique na localização atual correspondente na cadeia na parte de cima da Visão geral da linha do tempo.

Rolar um diagrama de chamas longo

Para rolar um gráfico de chama longo na faixa Main ou em qualquer um dos vizinhos, clique e mantenha pressionado, depois arraste em qualquer direção até que o que você está procurando apareça.

Pesquisar atividades

Para abrir uma caixa de pesquisa na parte de baixo do painel Desempenho, pressione:

• macOS: Command+F
• Windows e Linux: Control + F

Este exemplo mostra uma expressão regular na caixa de pesquisa na parte de baixo da tela que encontra qualquer atividade que comece com E.

Para alternar entre atividades que correspondem à sua consulta:

• Clique nos botões expand_less Anterior ou expand_less Próxima.
• Pressione Shift+Enter para selecionar a anterior ou Enter para selecionar a próxima.

O painel Performance mostra uma dica sobre a atividade selecionada na caixa de pesquisa.

Para modificar as configurações de consulta:

• Clique em match_case Diferenciar maiúsculas de minúsculas para que a consulta diferencie maiúsculas de minúsculas.
• Clique em regular_expression Expressão regular para usar uma expressão regular na sua consulta.

Para ocultar a caixa de pesquisa, clique em Cancelar.

Ver a atividade da linha de execução principal

Use a faixa Main para ver as atividades que ocorreram na linha de execução principal da página.

Clique em um evento para ver mais informações sobre ele na guia Resumo. O painel Desempenho descreve o evento selecionado em azul.

Este exemplo mostra mais informações sobre o evento de chamada de função get na guia Resumo.

Ocultar funções e os filhos no Flame Chart

Para organizar o Flame Chart na linha de execução Main, você pode ocultar as funções selecionadas ou as filhas delas:

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

   • Ocultar função (H)
   • Ocultar filhos (C)
   • Ocultar filhos recorrentes (R)
   • Redefinir filhos (U)
   • Redefinir rastros

   

   Um botão suspenso arrow_drop_down aparece ao lado do nome da função com os filhos ocultos.

2. Para ver o número de filhos ocultos, passe o cursor sobre o botão suspenso arrow_drop_down.

   

3. Para redefinir uma função com filhos ocultos ou todo o Flame Chart, selecione a função e pressione U ou clique com o botão direito do mouse em qualquer função e selecione Redefinir rastro, respectivamente.

Ler o Flame Chart

O painel Performance representa a atividade principal da linha de execução em um Flame Chart. O eixo x representa o registro ao longo do tempo. O eixo y representa a pilha de chamadas. Os eventos na parte superior causam os eventos abaixo.

Este exemplo mostra um Flame Chart na faixa Main. Um evento click causou uma chamada de função anônima. Essa função, por sua vez, chama onEndpointClick_, que chamou handleClick_ e assim por diante.

O painel Desempenho atribui aos scripts cores aleatórias para quebrar o Flame Chart e torná-lo mais legível. No exemplo anterior, as chamadas de função de um script têm cor azul claro. As chamadas de outro script têm a cor rosa claro. O amarelo mais escuro representa a atividade de script e o roxo representa a atividade de renderização. Esses eventos nas cores amarelo-escuro e roxo são consistentes em todas as gravações.

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

Nesse exemplo, a tarefa levou mais de 400 milissegundos, então a parte que representa os últimos 350 milissegundos está sombreada em vermelho, enquanto os 50 milissegundos iniciais não.

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

Para ocultar o Flame Chart detalhado das chamadas JavaScript, consulte Desativar amostras de JavaScript. Quando as amostras de JS estão desativadas, apenas os eventos de alto nível, como Event (click) e Function Call, aparecem.

monitorar 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 frame de animação -> Frame de animação disparado
• Request Idle Callback -> Fire Idle Callback
• Instalar Timer -> Timer disparado
• Criar WebSocket -> Enviar... e Receber handshake de WebSocket ou Destruir WebSocket

Para ver as setas, encontre um iniciador ou o evento que ele causou no Flame Chart e selecione-o.

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

Ver atividades em uma tabela

Depois de registrar uma página, você não precisa depender apenas da faixa Principal para analisar as atividades. O DevTools também oferece três visualizações tabulares para análise de atividades. Cada visualização oferece uma perspectiva diferente sobre as atividades:

• Quando você quiser visualizar as atividades raiz que geram a maior parte do trabalho, use a guia Call Tree.
• Quando quiser conferir as atividades em que mais tempo foi gasto diretamente, use a guia Bottom-Up.
• Para ver as atividades na ordem em que ocorreram durante a gravação, use a guia Log de eventos.

Para ajudar você a encontrar o que está procurando mais rapidamente, as três guias têm botões de filtragem avançada ao lado da barra Filtro:

• match_case Diferenciar maiúsculas de minúsculas.
• regular_expression Expressão regular.
• match_word Corresponde à palavra inteira.

Cada visualização tabular no painel Desempenho mostra links para atividades como chamadas de funções. Para ajudar na depuração, o DevTools encontra as declarações de função correspondentes nos arquivos de origem. Além disso, se os mapas de origem apropriados estiverem presentes e ativados, o DevTools encontrará automaticamente os arquivos originais.

Clique em um link para abrir um arquivo de origem no painel Origens.

Atividades raiz

Confira uma explicação do conceito de atividades raiz mencionado nas guias Árvore de chamadas, De baixo para cima e nas seções Log de eventos.

As atividades raiz são aquelas que fazem com que o navegador realize algum trabalho. Por exemplo, quando você clica em uma página, o navegador dispara uma atividade Event como a atividade raiz. Esse Event pode fazer com que um gerenciador seja executado.

No Flame Chart da faixa Main, as atividades raiz aparecem na parte superior do gráfico. Nas guias Call Tree e Event Log, as atividades raiz são os itens de nível superior.

Consulte A guia Árvore de chamadas para um exemplo de atividades raiz.

A guia "Árvore de chamadas"

Use a guia Call Tree para ver quais atividades raiz geram mais trabalho.

A guia Call Tree só mostra as atividades durante a parte selecionada da gravação. Consulte Selecionar uma parte de uma gravação para saber como selecionar partes.

Neste exemplo, o nível superior dos itens na coluna Atividade, como Event, Paint e Composite Layers, são atividades raiz. O aninhamento representa a pilha de chamadas. Nesse exemplo, o Event causou o Function Call, que causou o button.addEventListener, o que causou o b e assim por diante.

O tempo próprio representa o tempo gasto diretamente nessa atividade. O Tempo total representa o tempo gasto nessa atividade ou em qualquer uma das filhas dela.

Clique em Tempo próprio, Tempo total ou Atividade para classificar a tabela por essa coluna.

Use a caixa Filtrar para filtrar eventos por nome de 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 Show Heaviest Stack para revelar outra tabela à direita da tabela Activity. Clique em uma atividade para preencher a tabela Pilha mais pesada. A tabela Pilha mais pesada mostra quais filhos da atividade selecionada levaram mais tempo para serem executados.

Guia Bottom-Up

Use a guia Bottom-Up para ver quais atividades levaram diretamente mais tempo, no total.

A guia Bottom-Up mostra atividades apenas durante a parte selecionada da gravação. Consulte Selecionar uma parte de uma gravação para saber como selecionar partes.

No gráfico de chama Main deste exemplo, é possível ver que quase todo o tempo foi gasto na execução das três chamadas para wait(). Dessa forma, a atividade principal na guia Bottom-Up é wait. No Flame Chart, o amarelo abaixo das chamadas para wait representa, na verdade, milhares de chamadas Minor GC. Assim, é possível observar que, na guia Bottom-Up, a próxima atividade mais cara é a Minor GC.

A coluna Tempo próprio 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 uma das filhas dela.

A guia "Log de eventos"

Use a guia Event Log para ver as atividades na ordem em que ocorreram durante a gravação.

A guia Log de eventos só mostra as atividades durante a parte selecionada da gravação. Consulte Selecionar uma parte de uma gravação para saber como selecionar partes.

A coluna Horário de início representa o ponto em que essa atividade foi iniciada, em relação ao início da gravação. O horário de início de 1573.0 ms para o item selecionado nesse exemplo significa que a atividade começou 1.573 ms após o início da gravação.

A coluna Tempo próprio representa o tempo gasto diretamente nessa atividade.

As colunas Tempo total representam o tempo gasto diretamente nessa atividade ou em qualquer uma das filhas dela.

Clique em Horário de início, Horário próprio ou Tempo total para classificar a tabela por essa coluna.

Use a caixa Filtrar para filtrar as atividades por nome.

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

Desative as caixas de seleção Carregamento, Script, Renderização ou Pintura para filtrar todas as atividades dessas categorias.

Ver marcações de tempo

Na faixa Tempos, visualize marcadores importantes, como:

• First Paint (FP)
• First Contentful Paint (FCP, na sigla em inglês)
• Maior exibição de conteúdo (LCP)
• Evento DOMContentLoaded (DCL)
• Evento ao carregar (L)
• Suas chamadas performance.mark() personalizadas. Uma marca individual com uma dica é mostrada abaixo em 813,44 ms, com o rótulo Starting to run JavaScript.
• Suas chamadas performance.measure() personalizadas. Um período amarelo é mostrado abaixo, rotulado como Interação lenta.

Para ver mais detalhes na guia Resumo, selecione um marcador. Para ver o carimbo de data/hora do marcador, passe o cursor sobre ele na faixa Tempos.

Mostrar interações

Confira as interações do usuário no rastreamento Interações para rastrear possíveis problemas de capacidade de resposta.

Para conferir as interações:

1. Abra o DevTools, por exemplo, nesta página de demonstração.
2. Abra o painel Desempenho e inicie uma gravação.
3. Clique em um elemento (café) e pare a gravação.
4. Encontre a faixa Interações na linha do tempo.

Neste exemplo, a faixa Interactions mostra a interação de Pointer. As interações têm bigodes que indicam atrasos de entrada e apresentação nos limites de tempo de processamento. Passe o cursor sobre a interação para ver uma dica com os dados de atraso de entrada, tempo de processamento e atraso da apresentação.

A faixa Interactions também mostra avisos de Interaction to Next Paint (INP) para interações com mais de 200 milissegundos na guia Summary e em uma dica ao passar o cursor:

A faixa Interactions marca as interações durante 200 milissegundos com um triângulo vermelho no canto superior direito.

Ver atividade da GPU

Veja a atividade da GPU na seção GPU.

Conferir atividade de varredura

Veja a atividade de varredura na seção Pool de linhas de execução.

Analisar quadros por segundo (QPS)

O DevTools oferece várias maneiras de analisar quadros por segundo:

• Use a seção Frames para ver quanto tempo um frame específico levou.
• Use o medidor de QPS para ter uma estimativa em tempo real do QPS enquanto a página é executada. Consulte Visualizar quadros por segundo em tempo real com o medidor de QPS.

A seção "Frames"

A seção Frames informa exatamente quanto tempo um frame específico levou.

Passe o cursor sobre um frame para ver uma dica com mais informações sobre ele.

Este exemplo mostra uma dica quando você passa o cursor sobre um frame.

A seção Frames pode mostrar quatro tipos de frames:

1. Frame inativo (branco). Sem alterações.
2. Frame (verde). renderizado conforme esperado e dentro do prazo;
3. Frame parcialmente apresentado (amarelo com padrão de linhas de traço largas e esparsas). O Chrome fez o possível para renderizar pelo menos algumas atualizações visuais no tempo. Por exemplo, caso o trabalho da linha de execução principal do processo do renderizador (animação de tela) esteja atrasado, mas a linha de execução do compositor (rolagem) esteja no tempo.
4. Frame descartado (vermelho com um padrão de linha sólida densa). O Chrome não consegue renderizar o frame em um tempo razoável.

Este exemplo mostra uma dica quando você passa o cursor sobre um frame parcialmente apresentado.

Clique em um frame para ver mais informações sobre ele na guia Resumo. O DevTools desenha o frame selecionado em azul.

Ver solicitações de rede

Expanda a seção Rede para conferir uma hierarquia das solicitações de rede que ocorreram durante a gravação.

As solicitações são codificadas por cores da seguinte forma:

• HTML: azul
• CSS: roxo
• JS: amarelo
• Imagens: verde

Clique em uma solicitação para ver mais informações sobre ela na guia Resumo. No exemplo anterior, a guia Resumo exibe informações sobre a solicitação verde selecionada.

Um quadrado azul mais escuro no canto superior esquerdo de uma solicitação significa que ela é de maior prioridade. Um quadrado azul-claro significa menor prioridade. No exemplo anterior, a solicitação selecionada é de alta prioridade, e a azul acima dela é de maior prioridade.

A seção Resumo inclui os campos Prioridade inicial e Prioridade (final). Se os valores forem diferentes, a prioridade de busca da solicitação mudou durante a gravação. Para mais informações, consulte Como otimizar o carregamento de recursos com a API Fetch Priority.

No exemplo anterior, a solicitação de www.google.com é representada por uma linha à esquerda, uma barra no meio com uma parte escura e outra clara e uma linha à direita. A próxima captura de tela mostra a representação correspondente da mesma solicitação na guia Timing do painel Network. Veja como essas duas representações são mapeadas entre si:

• A linha à esquerda representa tudo até o grupo de eventos Connection Start, inclusive. Em outras palavras, é tudo que vem antes de Request Sent, exclusivo.
• A parte clara da barra é Request Sent e Waiting (TTFB).
• A parte escura da barra é a Content Download.
• A linha certa é essencialmente o tempo gasto aguardando a linha de execução principal. Isso não é representado na guia Tempo.

Neste exemplo, mostramos a representação de barra de linhas da solicitação www.google.com.

Este exemplo mostra a representação da guia Timing da solicitação www.google.com.

Ver métricas de memória

Marque a caixa de seleção Memória para ver as métricas de memória da última gravação.

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

Este exemplo mostra as métricas de memória acima da guia Resumo.

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

O gráfico mostra apenas a região selecionada para a gravação. No exemplo anterior, o gráfico de Memória mostra apenas o uso da memória no início da gravação, até aproximadamente 1.000 ms.

Ver 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 determinados eventos levaram. Segure Shift, clique e segure e arraste para a esquerda ou direita para selecionar uma parte da gravação. Na parte de baixo da seleção, o DevTools mostra quanto tempo essa parte demorou.

Neste exemplo, o carimbo de data/hora 488.53ms na parte inferior da parte selecionada indica quanto tempo essa parte levou.

Acessar uma captura de tela

Consulte Fazer capturas de tela ao gravar para saber como ativar esse recurso.

Passe o cursor sobre Visão geral da linha do tempo para conferir uma captura de tela da aparência da página durante esse momento da gravação. A Visão geral da linha do tempo é a seção que contém os gráficos de CPU, FPS e NET.

Também é possível ver capturas de tela clicando em um frame na seção Frames. O DevTools exibe uma versão pequena da captura de tela na guia Resumo.

Este exemplo mostra a captura de tela do frame 195.5ms na guia Summary quando você clica nele na seção Frames.

Clique na miniatura na guia Resumo para ampliar a captura de tela.

Este exemplo mostra uma captura de tela ampliada depois que você clica na miniatura na guia Resumo.

Ver informações das camadas

Para ver informações de camadas avançadas sobre um frame:

1. Ative a instrumentação avançada de exibição.
2. Selecione um frame na seção Frames. O DevTools mostra informações sobre as camadas na nova guia Layers, ao lado da guia Event Log.

Passe o cursor sobre uma camada para destacá-la no diagrama.

Este exemplo mostra a camada 39 destacada quando você passa o cursor sobre ela.

Para mover o diagrama:

• Clique em Modo de movimentação para se mover pelos eixos X e Y.
• Clique em Alternar modo para girar ao longo do eixo Z.
• Clique em Reset Transform para redefinir o diagrama para a posição original.

Confira a análise de camadas em ação:

Acessar o criador de perfil de pintura

Para visualizar informações avançadas sobre um evento de exibição:

1. Ative a instrumentação avançada de exibição.
2. Selecione um evento Paint na faixa Main.

Analisar o desempenho da renderização com a guia "Renderização"

Use os recursos da guia Renderização para ajudar a visualizar o desempenho de renderização da sua página.

Abra a guia Renderização.

Veja quadros por segundo em tempo real com o medidor de QPS

As estatísticas de renderização de frames são uma sobreposição que aparece no canto superior direito da janela de visualização. Ela fornece uma estimativa em tempo real de QPS enquanto a página é executada.

Consulte Estatísticas de renderização de frames.

Veja eventos de pintura em tempo real com o Paint Flashing

Use o Paint Flashing para ter uma visualização em tempo real de todos os eventos de pintura na página.

Consulte Atualização de pintura.

Ver uma sobreposição de camadas com bordas de camadas

Use Bordas da camada para visualizar uma sobreposição de bordas de camadas e blocos na parte superior da página.

Consulte Bordas de camada.

Encontrar problemas de desempenho na rolagem em tempo real

Use Problemas de desempenho de rolagem para identificar elementos da página com listeners de eventos relacionados à rolagem que podem prejudicar o desempenho da página. O DevTools descreve os elementos potencialmente problemáticos em verde-petróleo.

Consulte Problemas de desempenho de rolagem.