O painel Desempenho marca cada tarefa de longa duração com um triângulo vermelho no canto superior direito e um aviso na guia Resumo, para indicar o trabalho na linha de execução principal que demora muito para ser executada e tem desempenho lento:
Nas gravações de apresentações, algumas dessas tarefas de longa duração podem ser eventos de Recalcular estilo. O evento Recalcular estilo acompanha o tempo que o navegador leva para:
- Itere nos elementos DOM de uma página para encontrar todas as regras de estilo CSS que correspondem a um determinado elemento.
- Calcule o estilo real de cada elemento com base nas regras de estilo CSS correspondentes.
Os estilos CSS precisam ser recalculados sempre que a aplicabilidade das regras de CSS mudar, como quando:
- Os elementos são adicionados ou removidos do DOM.
- Os atributos de um elemento são alterados, como o valor de um atributo de ID ou classe.
- O usuário faz uma entrada, como um movimento do mouse ou uma mudança de foco do elemento, o que pode afetar as regras de
:hover.
Eventos de longa duração Recalcular estilo podem prejudicar a performance e causar atrasos longos na apresentação, que afetam a Interação com a Next Paint (INP) do seu site. Se você encontrar eventos Recalcular estilo de longa duração, use a guia Estatísticas do seletor para entender quais seletores de CSS estão levando mais tempo e reduzindo o desempenho.
A guia Estatísticas do seletor mostra estatísticas sobre os seletores de regras CSS envolvidos em um ou mais eventos Recalcular estilo em um registro de performance.
Registrar um trace de desempenho com as estatísticas do seletor ativadas
Para acessar as estatísticas dos seletores de regras CSS durante eventos de longa duração Recalcular estilo, registre um rastreamento de desempenho com a configuração de captura Estatísticas do seletor ativada.
Para registrar um rastreamento de desempenho com estatísticas do seletor:
Abra uma página da Web, como a página de demonstração da Galeria de fotos.
Abra o DevTools e acesse o painel Performance.
No painel Desempenho, clique no botão Configurações Configurações de captura e marque check_box Ativar estatísticas do seletor de CSS.
Clique em radio_button_checked Gravar, execute o cenário que você quer melhorar e clique em radio_button_checked Parar.
Em seguida, confira as estatísticas do seletor de CSS, conforme descrito nas próximas seções.
Acessar estatísticas do seletor de regras de CSS para um único evento
Para ver as estatísticas dos seletores de regra CSS envolvidos em um único evento Recalcular estilo:
Gravar um rastreamento de desempenho com a opção "Estatísticas do seletor" ativada.
Encontre um evento Recalcular estilo no registro de performance e clique nele.
Na seção inferior do painel Desempenho, abra a guia Estatísticas do seletor.
Tabela de seletores de CSS na guia "Estatísticas" do seletor
A guia Estatísticas do seletor contém uma tabela de seletores de CSS. A tabela mostra as seguintes informações para cada seletor de CSS:
| Coluna | Descrição |
|---|---|
| Tempo decorrido (ms) | O tempo que o navegador passou correspondente a esse seletor de CSS. Esse tempo é fornecido em milissegundos (ms), onde 1 ms é 1/1000 de segundo. |
| Tentativas de correspondência | O número de elementos que o mecanismo do navegador tentou corresponder a esse seletor de CSS. |
| Número de correspondências | O número de elementos que o mecanismo do navegador corresponde ao seletor de CSS. |
| % de não correspondências no caminho lento | A proporção de elementos que não correspondiam a esse seletor de CSS com os elementos que o mecanismo do navegador tentou corresponder e que exigia que o mecanismo do navegador usasse código menos otimizado para corresponder. |
| Seletor | O seletor de CSS correspondente. |
| Folha de estilo | A folha de estilo CSS que contém o seletor de CSS. |
Quando terminar, no painel Desempenho, abra as configurações Configurações de captura e desmarque check_box Ativar estatísticas do seletor de CSS.
Acessar estatísticas do seletor de regras de CSS para vários eventos
Para conferir as estatísticas agregadas dos seletores de regras de CSS envolvidos em vários eventos de recalcular estilo, copie várias tabelas de estatísticas do seletor em uma planilha, da seguinte maneira:
Gravar um rastreamento de desempenho com a opção "Estatísticas do seletor" ativada.
Encontre o primeiro evento Recalcular estilo em que você está interessado e clique nele.
Na seção inferior do painel Desempenho, abra a guia Estatísticas do seletor.
Clique com o botão direito do mouse na tabela de estatísticas do seletor e escolha Copiar tabela.
Cole a tabela em uma planilha, como o Planilhas Google.
Repita as etapas anteriores com os outros eventos de Recalcular estilo do seu interesse.
Quando terminar, no painel Desempenho, abra as configurações Configurações de captura e desmarque check_box Ativar estatísticas do seletor de CSS.
Confira as estatísticas agregadas do seletor de regras de CSS para o registro completo
Para conferir as estatísticas agregadas dos seletores de regras de CSS envolvidos em todo o registro de performance, faça o seguinte:
Gravar um rastreamento de desempenho com a opção "Estatísticas do seletor" ativada.
Clique em uma área vazia do Flame Chart para desmarcar eventos selecionados.
Selecione todo o intervalo de gravação. Para isso, clique duas vezes no gráfico da CPU na parte de cima do painel Desempenho.
Na seção inferior do painel Desempenho, abra a guia Estatísticas do seletor. Você verá uma nova linha na parte superior com dados sobre os totais de todos os seletores.
Quando terminar, no painel Desempenho, abra as configurações Configurações de captura e desmarque check_box Ativar estatísticas do seletor de CSS.
Analisar as estatísticas do seletor de CSS
Para classificar os dados na tabela Estatísticas do seletor em ordem crescente ou decrescente, clique no cabeçalho de uma coluna. Por exemplo, para saber quais seletores de CSS são mais demorados, clique no cabeçalho da coluna Tempo decorrido (ms).
Para tentar melhorar a performance da sua página da Web, concentre-se nos seletores de CSS que:
- O cálculo levou muito tempo (alto valor de Decorridos (ms)).
- Qual o tipo de correspondência que o navegador tentou fazer muitas vezes (alto valor de Tentativas de correspondência).
- O navegador com que o navegador não correspondeu muitos elementos (baixo valor de Contagem de correspondências em comparação com o valor de Tentativas de correspondência).
- Que têm uma alta porcentagem de não correspondências no caminho lento.
Por exemplo, na captura de tela anterior:
- O primeiro seletor de CSS (
html body .ps[tooltip...) exigiu mais tempo. - O mecanismo do navegador tentou corresponder esse seletor de CSS 1.104 vezes, mas não encontrou nenhum elemento.
Portanto, esse seletor de CSS é o primeiro candidato a tentar melhorar.
Tente alterar os seletores de CSS para que eles levem menos tempo para calcular e corresponder a menos elementos na página. A maneira de melhorar os seletores de CSS depende do seu caso de uso específico.
Repita as etapas deste tutorial para confirmar que suas mudanças ajudaram a diminuir a duração do evento Recalcular estilo, na coluna Decorrido (ms).