Analisar o desempenho do seletor do CSS durante eventos de estilo recalculado

A ferramenta Desempenho destaca cada tarefa de execução longa com um triângulo vermelho no canto superior direito, para indicar o trabalho no thread main que leva muito tempo para ser executado e tem um desempenho lento:

Em suas gravações de desempenho, algumas dessas tarefas de longa execução podem ser eventos de estilo recalculado . Um evento Estilo de Recalculação rastreia o tempo necessário para que o navegador faça o seguinte:

• Iterar por meio dos elementos DOM em uma página, para encontrar todas as regras de estilo CSS que correspondem a um determinado elemento.
• Compute 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 do CSS pode ter sido alterada, como:

• Quando os elementos são adicionados ou removidos do DOM.
• Quando os atributos de um elemento são alterados, como o valor de um class ou id atributo.
• Quando ocorre a entrada do usuário, como uma movimentação de mouse ou uma alteração de qual elemento em uma página da Web tem foco, o que pode afetar :hover as regras.

Quando você tem eventos de estilo recalculado de longa duração, você pode usar a guia Estatísticas do Seletor para entender qual dos seletores do CSS está ocupando mais tempo e resultando em desempenho lento.

A guia Estatísticas do Seletor fornece estatísticas sobre os seletores de regra do CSS envolvidos em um ou mais eventos de Estilo de Recalculação dentro de uma gravação de desempenho.

Registrar um rastreamento de desempenho com estatísticas de seletor habilitadas

Para exibir as estatísticas dos seletores de regra do CSS durante eventos de estilo recalculado de longa execução, primeiro registre um rastreamento de desempenho com o recurso Estatísticas do Seletor habilitado. Você habilita o recurso Estatísticas do Seletor selecionando a caixa de seleção Habilitar estatísticas do seletor CSS , que exibe a guia Estatísticas do Seletor .

O recurso Estatísticas do Seletor nem sempre está habilitado, pois adiciona mais sobrecarga às gravações de desempenho. Você só deve deixá-lo ativado quando precisar investigar o desempenho de eventos de Estilo recalculado e outras informações de renderização.

Para registrar um rastreamento de desempenho com estatísticas de seletor:

1. Abra uma página da Web em uma nova janela ou guia, como a página de demonstração da Galeria de Fotos .

2. Para abrir o DevTools, clique com o botão direito do mouse na página da Web e selecione Inspecionar. Ou pressione Ctrl+Shift+I (Windows, Linux) ou Command+Option+I (macOS). DevTools é aberto.

3. Em DevTools, na Barra de Atividades, selecione a guia Desempenho (). Se essa guia não estiver visível, selecione Mais ferramentas () >Desempenho.

4. Na ferramenta Desempenho , clique no botão Capturar configurações ().

5. Selecione a caixa de seleção Habilitar estatísticas do seletor CSS :

   

6. Clique no botão Gravar () e execute o cenário que deseja aprimorar para seu site ou aplicativo.

7. Clique no botão Parar .

Em seguida, exiba as estatísticas do seletor do CSS, conforme descrito nas seções abaixo.

Exibir estatísticas do seletor de regras do CSS para um único evento

Para exibir as estatísticas dos seletores de regra do CSS que estão envolvidos em um único evento Estilo de Recalculação :

1. Faça as etapas em Registrar um rastreamento de desempenho com as Estatísticas do Seletor habilitadas, acima.

2. Encontre um evento Recalcular Estilo na gravação de desempenho e clique nele.

3. Na seção inferior da ferramenta Desempenho , clique na guia Estatísticas do Seletor :

   

Tabela de seletores CSS na guia Estatísticas do Seletor

A guia Estatísticas do Seletor na ferramenta Desempenho contém uma tabela de seletores CSS. A tabela exibe as seguintes informações para cada seletor do CSS:

Coluna	Descrição
Decorrido (ms)	O tempo que o navegador gastou correspondendo a esse seletor CSS. Esse tempo é dado em milissegundos (ms), onde 1 ms é 1/1000 de segundo.
Corresponder tentativas	O número de elementos que o mecanismo do navegador tentou corresponder com esse seletor CSS.
Contagem de correspondências	O número de elementos que o mecanismo do navegador correspondeu com esse seletor CSS.
% de não correspondências de caminho lento	A proporção de elementos que não correspondem a esse seletor CSS, aos elementos que o mecanismo do navegador tentou corresponder e que exigiu que o mecanismo do navegador ussse um código menos otimizado para corresponder.
Seletor	O seletor CSS que foi correspondido.
Folha de Estilos	A folha de estilos CSS que contém o seletor CSS.

Quando terminar, na ferramenta Desempenho , clique no botão Capturar configurações ( a caixa de seleção Habilitar estatísticas do seletor CSS .

Exibir estatísticas do seletor de regras do CSS para vários eventos

Para exibir estatísticas agregadas dos seletores de regra do CSS envolvidos em vários eventos de Estilo de Recalculação , copie várias tabelas de Estatísticas do Seletor em uma planilha, da seguinte maneira:

1. Faça as etapas em Registrar um rastreamento de desempenho com as Estatísticas do Seletor habilitadas, acima.

2. Localize o primeiro evento Recalcular Estilo no qual você está interessado e clique nele.

3. Na seção inferior da ferramenta Desempenho , clique na guia Estatísticas do Seletor .

4. Clique com o botão direito do mouse na tabela de estatísticas do seletor e selecione Copiar Tabela:

   

5. Cole a tabela em uma planilha, como o Microsoft Excel.

6. Repita as etapas anteriores com os outros eventos de Estilo de Recalculação nos quais você está interessado.

Quando terminar, na ferramenta Desempenho , clique no botão Capturar configurações ( a caixa de seleção Habilitar estatísticas do seletor CSS .

Exibir estatísticas de seletor de regra do CSS agregado para a gravação completa

Para exibir estatísticas agregadas dos seletores de regra do CSS envolvidos em toda a gravação de desempenho:

1. Faça as etapas em Registrar um rastreamento de desempenho com as Estatísticas do Seletor habilitadas, acima.

2. Desmarque qualquer evento selecionado na gravação de desempenho clicando em uma área vazia do gráfico de chamas.

3. Selecione todo o intervalo de gravação. Para fazer isso, clique duas vezes no gráfico da CPU na parte superior da ferramenta Desempenho ou, usando o mouse, passe o mouse sobre o gráfico de chamas e role para cima até que todo o gráfico seja exibido.

4. Na seção inferior da ferramenta Desempenho , clique na guia Estatísticas do Seletor :

   

Quando terminar, na ferramenta Desempenho , clique no botão Capturar configurações ( a caixa de seleção Habilitar estatísticas do seletor CSS .

Analisar estatísticas do seletor do CSS

Para classificar os dados exibidos na tabela Estatísticas do Seletor em ordem crescente ou decrescente, clique em um cabeçalho de coluna. Por exemplo, para ver quais seletores CSS tomam mais tempo, clique no cabeçalho da coluna Elapsed (ms):

Para tentar melhorar o desempenho da página da Web, concentre-se nos seletores do CSS que:

• levou muito tempo para calcular (alto valor decorrido (ms),
• e que o navegador tentou corresponder muitas vezes (alto valor de Tentativas de Correspondência ),
• e com os quais o navegador realmente não correspondia a muitos elementos com (valor de contagem de correspondência baixo em comparação com o valor de Tentativas de Correspondência ),
• e com uma alta porcentagem de não correspondências de caminho lento.

Por exemplo, na captura de tela acima:

• O primeiro seletor CSS (.gallery .photo .meta ::selection) exigiu mais tempo.
• O mecanismo do navegador tentou corresponder a esse seletor CSS 6017 vezes, mas só correspondeu a 3234 elementos.
• Dos 2.783 elementos que não corresponderam, 78% deles precisavam de código menos otimizado para corresponder.

Portanto, esse seletor CSS é um bom candidato para tentar melhorar.

Tente alterar seus seletores CSS para que eles exijam menos tempo para calcular e correspondam a menos elementos na página. Como melhorar seus seletores CSS depende do caso de uso específico. Repita as etapas nas seções "Gravar" e "Exibir" acima, para confirmar que suas alterações ajudaram a diminuir a duração do evento Estilo recalculado, na coluna Elapsed (ms).

Confira também

• Introdução à ferramenta Desempenho – uma introdução à análise do desempenho do runtime no DevTools.
• Referência de recursos de desempenho – aborda muitos dos recursos na ferramenta Desempenho .
• A verdade sobre o desempenho do seletor do CSS – postagem no blog do Windows.