Analisar o desempenho do seletor CSS durante os eventos Recalcular Estilo

Quando a página Web tiver eventos recalcular estilo de execução prolongada, para identificar quais dos seletores CSS estão a ocupar mais tempo e resultar num desempenho lento, utilize o separador Estatísticas do Seletor na ferramenta Desempenho . O separador Estatísticas do Seletor fornece estatísticas sobre os seletores de regras CSS que estiveram envolvidos num ou mais eventos Recalcular Estilo numa gravação de desempenho.

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

Nas suas gravações de desempenho, algumas destas tarefas de execução prolongada podem ser Eventos de Estilo Recalcular . Um evento Recalcular Estilo controla o tempo que o browser demora a fazer o seguinte:

• Itere através dos elementos DOM numa 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 têm de ser recalculados sempre que a aplicabilidade das regras CSS possa 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 utilizador, como um movimento do rato ou uma alteração do elemento numa página Web, o que pode afetar :hover as regras.

Registar um rastreio de desempenho com as Estatísticas do Seletor ativadas

Para ver as estatísticas dos seletores de regras CSS durante eventos de Recalcular Estilo de execução prolongada, primeiro registe um rastreio de desempenho com a funcionalidade Estatísticas do Seletor ativada. Para ativar a funcionalidade Estatísticas do Seletor, selecione a caixa de verificação Ativar estatísticas do seletor CSS , que apresenta o separador Estatísticas do Seletor .

A funcionalidade Estatísticas do Seletor nem sempre está ativada, porque adiciona mais sobrecarga às gravações de desempenho. Só deve deixá-la ativada quando precisar de investigar o desempenho dos eventos Recalcular Estilo e outras informações de composição.

Para registar um rastreio de desempenho com estatísticas do seletor:

1. Abra uma página Web numa nova janela ou separador, como a página de demonstração da Galeria de Fotografias .

2. Para abrir o DevTools, clique com o botão direito do rato na página Web e, em seguida, selecione Inspecionar. Em alternativa, prima Ctrl+Shift+I (Windows, Linux) ou Comando+Opção+I (macOS). O DevTools é aberto.

3. Em DevTools, na Barra de Atividade, selecione o separador Desempenho (). Se esse separador não estiver visível, selecione Mais ferramentas () >Desempenho.

4. Na ferramenta Desempenho , clique no botão Definições de captura ().

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

   

6. Clique no botão Gravar () e, em seguida, execute o cenário que pretende melhorar para o seu site ou aplicação.

7. Clique no botão Parar .

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

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

Para ver as estatísticas dos seletores de regras CSS envolvidos num único evento Recalcular Estilo :

1. Efetue os passos em Registar um rastreio de desempenho com as Estatísticas do Seletor ativadas acima.

2. Localize um evento Recalcular Estilo na gravação de desempenho e clique no mesmo.

3. Na secção inferior da ferramenta Desempenho , clique no separador Estatísticas do Seletor :

   

Tabela de seletores CSS no separador Estatísticas do Seletor

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

Coluna	Descrição
Decorrido (ms)	A quantidade de tempo que o browser passou a corresponder a este seletor CSS. Este tempo é dado em milissegundos (ms), em que 1 ms é 1/1000 de segundo.
Tentativas de Correspondência	O número de elementos que o motor do browser tentou corresponder a este seletor CSS.
Contagem de Correspondências	O número de elementos que o motor do browser correspondeu a este seletor CSS.
% de não correspondências de caminho lento	A proporção de elementos que não correspondem a este seletor CSS, aos elementos que o motor do browser tentou corresponder e que exigiu que o motor do browser utilizasse 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 Definições de captura () e, em seguida, desmarque a caixa de verificação Ativar estatísticas do seletor CSS .

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

Para ver estatísticas agregadas dos seletores de regras CSS envolvidos em vários eventos recalcular estilo , copie várias tabelas de Estatísticas do Seletor para uma folha de cálculo da seguinte forma:

1. Efetue os passos em Registar um rastreio de desempenho com as Estatísticas do Seletor ativadas acima.

2. Localize o primeiro evento Recalcular Estilo em que está interessado e, em seguida, clique no mesmo.

3. Na secção inferior da ferramenta Desempenho , clique no separador Estatísticas do Seletor .

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

   

5. Cole a tabela numa folha de cálculo, como o Microsoft Excel.

6. Repita os passos anteriores com os outros eventos Recalcular Estilo que lhe interessam.

Quando terminar, na ferramenta Desempenho , clique no botão Definições de captura () e, em seguida, desmarque a caixa de verificação Ativar estatísticas do seletor CSS .

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

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

1. Efetue os passos em Registar um rastreio de desempenho com as Estatísticas do Seletor ativadas acima.

2. Desselecione qualquer evento selecionado na gravação de desempenho ao clicar numa área vazia do gráfico de chama.

3. Selecione todo o intervalo de gravação. Para tal, faça duplo clique no gráfico da CPU na parte superior da ferramenta Desempenho ou, com o rato, paire o rato sobre o gráfico de chama e desloque-se para cima até que todo o gráfico seja apresentado.

4. Na secção inferior da ferramenta Desempenho , clique no separador Estatísticas do Seletor :

   

Quando terminar, na ferramenta Desempenho , clique no botão Definições de captura () e, em seguida, desmarque a caixa de verificação Ativar estatísticas do seletor CSS .

Analisar estatísticas do seletor CSS

Para ordenar os dados apresentados na tabela Estatísticas do Seletor por ordem ascendente ou descendente, clique num cabeçalho de coluna. Por exemplo, para ver que seletores CSS ocupam mais tempo, clique no cabeçalho da coluna Decorrido (ms):

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

• demorou muito tempo a calcular (valor deCorrido elevado (ms) ),
• e que o browser tentou corresponder muitas vezes (valor de Tentativas de Correspondência elevado),
• e com o qual o browser não correspondeu a muitos elementos (valor de Contagem de Correspondências baixo em comparação com o valor Tentativas de Correspondência ),
• e com uma percentagem elevada de não correspondências de caminho lento.

Por exemplo, na captura de ecrã acima:

• O primeiro seletor CSS (.gallery .photo .meta ::selection) exigiu mais tempo.
• O motor do browser tentou corresponder a este seletor CSS 6017 vezes, mas só correspondeu a 3234 elementos.
• Dos 2783 elementos que não correspondem, 78% deles necessitaram de código menos otimizado para corresponder.

Por conseguinte, este seletor CSS é um bom candidato para tentar melhorar.

Tente alterar os seletores CSS para que precisem de menos tempo para calcular e correspondam a menos elementos na página. A forma de melhorar os seletores CSS depende do seu caso de utilização específico. Repita os passos nas secções "Gravar" e "Ver" acima para confirmar que as alterações ajudaram a diminuir a duração do evento Recalcular Estilo, na coluna Elapsed (ms).

Confira também

• Introdução à Ferramenta de desempenho – uma introdução à análise do desempenho do runtime no DevTools.
• Referência de funcionalidades de desempenho – abrange muitas das funcionalidades na ferramenta Desempenho .
• A verdade sobre o desempenho do seletor CSS – mensagem de blogue do Windows.