Referência dos recursos de desempenho

Kayce Basques

Sofia Emelianova

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

Consulte Começar a analisar o desempenho em tempo de execução para conferir um tutorial guiado sobre como analisar o desempenho de uma página usando o Chrome DevTools.

Gravar performance

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

Gravar o desempenho em tempo de execução

Registre o desempenho do tempo de execução para analisar o desempenho de uma página enquanto ela está em execução, em vez do carregamento.

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

3. Clique em Gravar .

   

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

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

Desempenho de carregamento de registro

Registre o desempenho do carregamento quando quiser analisar a performance 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 para about:blank para limpar todas as capturas de tela e rastros restantes. Em seguida, o DevTools grava as métricas de desempenho enquanto a página é recarregada e interrompe automaticamente a gravação alguns segundos após a conclusão do carregamento.

   

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

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

Fazer capturas de tela durante a gravação

Marque a caixa de seleção Capturas de tela para registrar uma captura de cada frame durante a gravação.

Consulte Ver uma captura de tela para saber como interagir com capturas de tela.

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

Enquanto estiver gravando uma página, clique em Coletar lixo 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 desempenho.

Desativar exemplos de JavaScript

Por padrão, a faixa Main de uma gravação exibe 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 Desativar amostras do JavaScript.
3. Faça uma gravação da página.

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

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

Este exemplo mostra uma gravação com amostras 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 CPU como o nível de limitação escolhido.

A limitação depende dos recursos do seu computador. Por exemplo, a opção Lentidão 2x faz com que a CPU opere duas vezes mais devagar do que a capacidade normal. O DevTools não pode simular de verdade as CPUs de dispositivos móveis, porque a arquitetura deles é muito diferente da de desktops e laptops.

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

Para visualizar a instrumentação de pintura detalhada:

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

Para aprender a interagir com as informações de pintura, consulte Ver camadas e Ver criador de 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 relatado pela propriedade navigator.hardwareConcurrency. Alguns aplicativos usam essa propriedade para controlar o grau de paralelismo do aplicativo, por exemplo, para controlar o tamanho do pool de linhas de execução Emscripten.

Para emular a simultaneidade de hardware:

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

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

Se quiser 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 Clear recording para limpar essa gravação no painel Performance.

Analisar uma gravação de performance

Depois de registrar o desempenho do ambiente de execução ou registrar o desempenho do carregamento, o painel Desempenho fornece muitos dados para análise do desempenho do que acabou de acontecer.

Navegar pela gravação

Para inspecionar melhor sua gravação de desempenho, selecione uma parte da gravação, role um longo diagrama de chamas, aumente e diminua o zoom e use a navegação estrutural para mudar os níveis de zoom.

Selecione uma parte da gravação

Abaixo da barra de ações do painel Desempenho e na parte superior da gravação, você encontra a seção Visão geral da linha do tempo com os gráficos de CPU e NET.

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

Para selecionar uma parte usando o teclado:

1. Focar na faixa Main ou em qualquer uma das vizinhas.
2. Use as teclas W, A, S e D para aumentar, mover para a esquerda, diminuir o zoom 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 qualquer uma das faixas (Principal e vizinhas).
2. Com dois dedos, deslize para cima para diminuir o zoom, para a esquerda para mover para a esquerda, para baixo se quiser aumentar o zoom e para a direita se quiser mover para a direita.

Crie localizações atuais e navegue entre níveis de zoom

Com a Visão geral da linha do tempo, você pode criar várias localizações atuais aninhadas sucessivamente, aumentando os níveis de zoom e pulando 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 é aberta para preencher a Visão geral da linha do tempo. Uma cadeia de navegação estrutural começa a ser criada no topo 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 as navegações estruturais, desde que o intervalo de seleção seja maior que cinco milissegundos.
4. Para acessar 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 diagrama de chamas longo na faixa Main ou em qualquer um dos vizinhos, clique e mantenha pressionado, depois arraste em qualquer direção até o que você está procurando ser exibido.

Pesquisar atividades

Para abrir uma caixa de pesquisa na parte inferior 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 que encontra qualquer atividade que comece com E.

Para alternar entre as 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 Desempenho 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 em sua consulta.

Para ocultar a caixa de pesquisa, clique em Cancelar.

Ver a atividade principal da linha de execução

Use a faixa Principal 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.

Neste exemplo, mostramos mais informações sobre o evento de chamada de função get na guia Resumo.

Leia o Flame Chart

O painel Desempenho 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 de cima 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, chamava onEndpointClick_, que chamava handleClick_ e assim por diante.

O painel Desempenho atribui cores aleatórias aos scripts para quebrar o Flame Chart e torná-lo mais legível. No exemplo anterior, as chamadas de função de um script estão em 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 amarelos e roxo mais escuros são consistentes em todas as gravações.

As tarefas longas também são destacadas com um triângulo vermelho, e a parte com mais de 50 milissegundos está 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 Main mostra informações sobre perfis de CPU iniciados e interrompidos com as funções profile() e profileEnd() do console.

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

Rastrear 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
• Solicitar callback inativo -> Callback inativo
• Instalar timer -> Timer disparado
• Criar WebSocket -> Enviar... e Receber handshake de WebSocket ou Destruir WebSocket

Para ver as setas, encontre um dos iniciadores no Flame Chart e clique nele.

Consultar atividades em uma tabela

Depois de gravar uma página, você não precisa confiar apenas na faixa Main para analisar as atividades. O DevTools também oferece três visualizações tabulares para analisar atividades. Cada visualização oferece uma perspectiva diferente sobre as atividades:

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

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

• match_case Corresponder maiúsculas e minúsculas.
• regular_expression Expressão regular.
• match_word Fazer correspondência da 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 Fontes.

Observação:as três seções a seguir se referem à mesma demonstração. Você pode executar a demonstração na Demonstração das guias de atividades e acessar a origem em GoogleChrome/devtools-samples/perf/activitytabs.html (link em inglês).

Atividades raiz

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

As atividades raiz são aquelas que fazem com que o navegador execute 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 ficam na parte de cima. 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 ver um exemplo de atividades raiz.

A guia Árvore de chamadas

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

A guia Árvore de chamadas só mostra 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 a Function Call, o que causou button.addEventListener, o que causou 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 um dos filhos dela.

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

Use a caixa Filtro para filtrar 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 Show Weaviest Stack para revelar outra tabela à direita da 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 usaram diretamente o maior tempo de agregação.

A guia Bottom-Up só mostra atividades 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 da faixa Principal deste exemplo, é possível ver que quase todo o tempo foi gasto executando as três chamadas para wait(). Da mesma forma, a atividade principal na guia Bottom-Up é wait. No Flame Chart, o amarelo abaixo das chamadas para wait são, na verdade, milhares de chamadas Minor GC. Da mesma forma, é possível ver que na guia Bottom-Up, a próxima atividade mais cara é Minor GC.

A coluna Tempo próprio representa o tempo agregado gasto diretamente nessa atividade em todas as ocorrências dela.

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ó exibe 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 a 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 neste 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 um dos filhos.

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

Use a caixa Filtro 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 Loading, Scripting, Rendering ou Painting para filtrar todas as atividades dessas categorias.

Ver marcações de tempo

Na faixa Tempos, veja marcadores importantes como:

• Primeira exibição (FP)
• Primeira exibição de conteúdo (FCP, na sigla em inglês)
• Maior exibição de conteúdo (LCP)
• Evento DOMContentLoaded (DCL)
• Evento onload (L)
• Suas chamadas performance.mark() personalizadas. Uma marca individual com uma dica é mostrada abaixo em 813,44 ms, identificada como Starting to run JavaScript.
• Suas chamadas performance.measure() personalizadas. Um período amarelo é mostrado abaixo, chamado 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.

Ver interações

Visualize as interações dos usuários no acompanhamento Interações para rastrear possíveis problemas de capacidade de resposta.

Para ver as interações, faça o seguinte:

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 interrompa a gravação.
4. Encontre a faixa Interações na linha do tempo.

Neste exemplo, a faixa Interactions mostra a interação Pointer. As interações têm bigodes que indicam atrasos de entrada e apresentação nos limites do tempo de processamento. Passe o cursor sobre a interação para ver uma dica com o atraso de entrada, o tempo de processamento e o 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 Resumo e em uma dica ao passar o cursor:

A faixa Interações marca as interações ao longo de 200 milissegundos com um triângulo vermelho no canto superior direito.

Conferir a atividade da GPU

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

Conferir atividade de varredura

Confira a atividade de varredura na seção Raster.

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 conforme a página é exibida. Consulte Ver quadros por segundo em tempo real com o medidor de QPS.

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 como esperado e no prazo.
3. Frame apresentado parcialmente (amarelo com padrão de traço largo esparso). O Chrome fez o possível para renderizar pelo menos algumas atualizações visuais a 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) está no tempo.
4. Frame descartado (vermelho com um padrão denso de linha sólida). O Chrome não pode 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 acessar ainda mais informações sobre ele na guia Resumo. O DevTools destaca o frame selecionado em azul.

Ver solicitações de rede

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

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

• 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 mostra informações sobre a solicitação verde selecionada.

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

A seção Resumo inclui os campos Prioridade inicial e Prioridade (final) Se os valores forem diferentes, a prioridade de busca da solicitação foi alterada 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 uma parte 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 é 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 é Content Download.
• A linha certa é essencialmente o tempo gasto aguardando a linha de execução principal. Isso não é representado na guia Tempo.

Este exemplo mostra 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.

Conferir métricas de memória

Marque a caixa de seleção Memória para conferir as métricas 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 gráfico da NET, chamado HEAP. O gráfico HEAP fornece as mesmas informações que a linha JS Heap no gráfico Memória.

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

As linhas coloridas no gráfico correspondem às caixas de seleção coloridas acima dele. Desative uma caixa de seleção para ocultar essa categoria do gráfico.

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

Conferir 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. Mantenha a tecla Shift pressionada, clique e mantenha pressionada e arraste para a esquerda ou direita para selecionar uma parte da gravação. Na parte inferior da sua seleção, o DevTools mostra quanto tempo essa parte levou.

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

Ver uma captura de tela

Consulte Fazer capturas de tela durante uma gravação para saber como ativar capturas de tela.

Passe o cursor sobre Visão geral da linha do tempo para ver uma captura de tela que mostra como a página estava naquele momento da gravação. A seção Visão geral da linha do tempo 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 pequena versão da captura de tela na guia Summary.

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

Clique na miniatura na guia Resumo para aumentar o zoom na captura de tela.

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

Ver informações das camadas

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

1. Ativar a instrumentação avançada de pintura.
2. Selecione um frame na seção Frames. O DevTools exibe 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 panorâmica para mover ao longo dos eixos X e Y.
• Clique em Modo de rotação para girar ao longo do eixo Z.
• Clique em Redefinir transformação para redefinir o diagrama para a posição original.

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

Mostrar o Pain Profiler

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

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

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

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

Abra a guia Renderização.

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

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

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

Confira eventos de pintura em tempo real com o Paint Flashing

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

Consulte Exibição de tinta.

Visualizar uma sobreposição de camadas com as bordas das camadas

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

Consulte Bordas de camada.

Encontrar problemas de desempenho de rolagem em tempo real

Use Problemas de desempenho de rolagem para identificar elementos da página que têm listeners de eventos relacionados à rolagem que podem prejudicar o desempenho da página. O DevTools descreve os elementos potencialmente problemáticos na cor azul-petróleo.

Consulte Problemas de desempenho de rolagem.