Analise o desempenho do seletor CSS durante os eventos Recalcular Estilo

Quando sua página da Web tiver eventos de Recalcular Estilo de longa duração, para identificar quais dos seletores CSS estão demorando mais e resultando em baixo desempenho, use a guia Estatísticas do Seletor na ferramenta Desempenho . A guia Estatísticas do seletor fornece estatísticas sobre os seletores de regras CSS que estavam envolvidos em um ou mais eventos Recalcular estilo em uma gravação de desempenho.

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

Em suas gravações de desempenho, algumas dessas tarefas de execução longa podem ser eventos de Recalcular Estilo . Um evento Recalcular Estilo rastreia o tempo que o navegador leva para fazer o seguinte:

• Itere pelos elementos DOM em uma página para localizar todas as regras de estilo CSS que correspondam 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 CSS puder ser alterada, como:

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

Registrar um rastreamento de desempenho com as Estatísticas do Seletor habilitadas

Para exibir as estatísticas dos seletores de regras CSS durante eventos de Recalcular Estilo de longa duração, primeiro registre um rastreamento de desempenho com o recurso Estatísticas do Seletor habilitado. Você habilita o recurso Estatísticas do seletor marcando a caixa de seleção Ativar estatísticas do seletor CSS (lenta), que exibe a guia Estatísticas do seletor .

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

Para registrar um rastreamento de desempenho com estatísticas do 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). O DevTools é aberto.

3. No 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 Configurações de Captura ().

5. Marque a caixa de seleção Habilitar estatísticas de seletor CSS (lenta ):

   

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

7. Clique no botão Parar .

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

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

Para exibir as estatísticas dos seletores de regras CSS envolvidos em um único evento Recalcular Estilo :

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

2. Encontre um evento Recalcular estilo em sua 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 CSS:

Quando terminar, na ferramenta Desempenho, clique no botão Configurações de Captura () e desmarque a caixa de seleção Habilitar estatísticas do seletor CSS (lenta).

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

Para exibir estatísticas agregadas dos seletores de regras CSS envolvidos em vários eventos de Recalcular estilo , copie várias tabelas de estatísticas do seletor em uma planilha, da seguinte maneira:

1. Siga 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 Recalcular estilo nos quais você está interessado.

Quando terminar, na ferramenta Desempenho, clique no botão Configurações de Captura () e desmarque a caixa de seleção Habilitar estatísticas do seletor CSS (lenta).

Exiba as estatísticas agregadas do seletor de regras CSS para a gravação completa

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

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

2. Desmarque qualquer evento selecionado na gravação da apresentação, clicando em uma área vazia do gráfico de degradê.

3. Selecione todo o intervalo de gravação. Para fazer isso, clique duas vezes no gráfico de 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 Configurações de Captura () e desmarque a caixa de seleção Habilitar estatísticas do seletor CSS (lenta).

Analisar estatísticas do seletor 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 ocupam mais tempo, clique no cabeçalho da coluna Elapsed (ms ):

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

• demorou muito para calcular (alto valor de Elapsed (ms) ),
• e que o navegador tentou corresponder muitas vezes (alto valor de Tentativas de Correspondência ),
• e com o qual o navegador não correspondeu a muitos elementos (baixo valor de contagem de correspondência 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 este seletor CSS 6017 vezes, mas correspondeu apenas a 3234 elementos.
• Dos 2783 elementos que não correspondiam, 78% deles exigiam menos código otimizado para corresponder.

Portanto, este 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 seu caso de uso específico. Repita as etapas nas seções "Registro" e "Exibição" acima para confirmar que suas alterações ajudaram a diminuir a duração do evento Recalcular estilo , na coluna Decorrido (ms ).

Confira também

• Veja os custos do seletor de CSS na barra lateral da ferramenta Desempenho em Novidades do DevTools (Microsoft Edge 131).
• Analisar o desempenho do tempo de execução (tutorial) – uma introdução à análise do desempenho do tempo de execução no DevTools.
• Referência de recursos de desempenho - Aborda muitos dos recursos da ferramenta Desempenho .
• A verdade sobre o desempenho do seletor CSS - Windows postagem no blog.