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 leva muito tempo para ser executada e tem desempenho lento:
Nas gravações de desempenho, algumas dessas tarefas de longa duração podem ser eventos Recalcular estilo. Um evento Recalcular estilo acompanha o tempo que o navegador leva para fazer o seguinte:
- Itere nos elementos DOM de uma página para encontrar todas as regras de estilo CSS que correspondem a 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 puder ser alterada, por exemplo:
- Os elementos são adicionados ou removidos do DOM.
- Os atributos de um elemento são alterados, como o valor de uma classe ou um atributo de ID.
- O usuário faz entradas, como um movimento do mouse ou uma mudança no foco do elemento, o que pode afetar as regras
:hover.
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 demorando mais e diminuindo o desempenho.
A guia Estatísticas do seletor mostra estatísticas sobre os seletores de regras de CSS envolvidos em um ou mais eventos Recalcular estilo em um registro de desempenho.
Registrar um rastreamento de desempenho com as estatísticas do seletor ativadas
Para conferir as estatísticas dos seletores de regras de CSS durante eventos Recalcular estilo de longa duração, 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 de seletor:
Abra uma página da Web, por exemplo, a página de demonstração da Galeria de fotos.
Abra o DevTools e acesse o painel Performance.
No painel Performance, clique no botão de configurações Capturar configurações 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 as estatísticas do seletor de regras de CSS para um único evento
Para conferir as estatísticas dos seletores de regras CSS envolvidos em um único evento ReCalcular estilo, faça o seguinte:
Gravar um rastreamento de desempenho com as estatísticas do seletor ativadas.
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 gastou para corresponder a esse seletor de CSS. Esse tempo é dado em milissegundos (ms), em que 1 ms corresponde a 1/1.000 de um segundo. |
| Tentativas de correspondência | O número de elementos que o mecanismo do navegador tentou corresponder a este seletor de CSS. |
| Contagem de correspondências | O número de elementos que o mecanismo do navegador correspondeu a este seletor de CSS. |
| % de não correspondências no caminho lento | A proporção de elementos que não corresponderam a este seletor de CSS, os elementos que o mecanismo do navegador tentou corresponder e que exigiu que o mecanismo do navegador usasse código menos otimizado para fazer a correspondência. |
| Seletor | O seletor de CSS que foi correspondido. |
| Folha de estilo | A folha de estilos CSS que contém o seletor de CSS. |
Quando terminar, no painel Performance, abra as configurações Configurações de captura e desmarque a caixa de seleção Ativar estatísticas do seletor de CSS.
Acessar as estatísticas do seletor de regras de CSS para vários eventos
Para visualizar as estatísticas agregadas dos seletores de regras de CSS envolvidos em vários eventos Recalcular estilo, copie várias tabelas de Estatísticas do seletor em uma planilha da seguinte maneira:
Gravar um rastreamento de desempenho com as estatísticas do seletor ativadas.
Encontre o primeiro evento Recalcular estilo em que você tem interesse 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 selecione Copiar tabela.
Cole a tabela em uma planilha, como o Planilhas Google.
Repita as etapas anteriores com os outros eventos Recalcular estilo do seu interesse.
Quando terminar, no painel Performance, abra as configurações Configurações de captura e desmarque a caixa de seleção Ativar estatísticas do seletor de CSS.
Confira as estatísticas agregadas do seletor de regras de CSS para a gravação completa
Para conferir as estatísticas agregadas dos seletores de regras CSS envolvidos em toda a gravação de performance:
Gravar um rastreamento de desempenho com as estatísticas do seletor ativadas.
Clique em uma área vazia do Flame Chart para desmarcar qualquer evento que possa ser selecionado.
Selecione todo o intervalo de gravação. Para fazer isso, clique duas vezes no gráfico da CPU na parte de cima do painel Performance.
Na seção inferior do painel Desempenho, abra a guia Estatísticas do seletor. Você verá uma nova linha na parte superior com os dados dos totais de todos os seletores.
Quando terminar, no painel Performance, abra as configurações Configurações de captura e desmarque a caixa de seleção 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 levam mais tempo, clique no cabeçalho da coluna Decorrido (ms).
Para tentar melhorar o desempenho da sua página da Web, concentre-se nos seletores de CSS que:
- O cálculo levou muito tempo (alto valor de decorrido (ms)).
- Indica qual o navegador tentou corresponder várias vezes (valor alto de Match Attempts).
- Indica quais o navegador não associou a muitos elementos (baixo valor de Match Count em comparação com o valor de Match Attempts).
- Que têm uma alta porcentagem de não correspondências de 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 fazer a correspondência desse seletor de CSS 1.104 vezes, mas não encontrou nenhum elemento.
Portanto, esse seletor de CSS é o primeiro candidato a tentar melhorar.
Mude os seletores de CSS para que eles precisem de menos tempo para calcular e correspondam 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 se as mudanças ajudaram a diminuir a duração do evento Recalcular estilo, na coluna Decorrido (ms).