Reduzir o escopo e a complexidade dos cálculos de estilo

JavaScript geralmente aciona mudanças visuais. Às vezes, isso torna mudanças diretamente por meio de manipulações de estilo e, às vezes, por meio de cálculos que resultam em mudanças visuais, como pesquisar ou classificar dados. No momento certo ou JavaScript de longa duração pode ser uma causa comum de problemas de desempenho, e você deve minimizar seu impacto ao máximo.

Cálculo do estilo

Alterar o DOM adicionando e removendo elementos, alterando atributos, classes, ou a reprodução de animações faz com que o navegador recalcule os estilos dos elementos e, em muitos casos, o layout de parte ou de toda a página. Esse processo é chamado cálculo de estilo.

O navegador começa a calcular estilos criando um conjunto de seletores correspondentes para determinam quais classes, pseudosseletores e IDs se aplicam a um determinado elemento. Em seguida, ele processa as regras de estilo dos seletores correspondentes e descobre os estilos finais do elemento.

O papel do recálculo de estilo na latência de interação

Interaction to Next Paint (INP) é um ambiente de execução centrado no usuário. que avalia a capacidade de resposta geral de uma página em relação à entrada do usuário. Mede a latência de interação desde quando o usuário interage com a página até o navegador pinta o próximo frame, mostrando as atualizações visuais correspondentes para na interface do usuário.

Um componente significativo de uma interação é o tempo necessário para pintar a próxima frame. O trabalho de renderização feito para apresentar o próximo frame é composto por várias partes: incluindo o cálculo de estilos de página que ocorrem pouco antes do layout, pintura e e composição do trabalho. Este guia se concentra nos custos de cálculo de estilo, mas reduzir qualquer parte da duração de renderização total da interação também reduz seu latência de rede.

Reduza a complexidade dos seus seletores

Simplificar os seletores de CSS pode ajudar a acelerar os cálculos de estilo da sua página. Os seletores mais simples fazem referência a um elemento no CSS apenas com um nome de classe:

.title {
  /* styles */
}

Mas, conforme qualquer projeto cresce, ele provavelmente precisa de CSS mais complexo, e você pode terminar com seletores como estes:

.box:nth-last-child(-n+1) .title {
  /* styles */
}

Para determinar como esses estilos se aplicam à página, o navegador tem que efetivamente pergunte: "este é um elemento com uma classe de title com um pai de uma classe de box que é o filho menos-nth-mais-1 do elemento pai? Para descobrir isso pode levar algum tempo para o navegador. Para simplificar isso, você pode alterar seletor para ser um nome de classe mais específico:

.final-box-title {
  /* styles */
}

Esses nomes de classe de substituição podem parecer estranhos, mas tornam trabalho muito mais simples. Na versão anterior, por exemplo, para o navegador saber um elemento é o último de seu tipo, ele deve primeiro saber tudo sobre todos os outros elementos para determinar se algum elemento posterior que poderia será o nth-last-child. Isso pode ser muito mais caro em termos computacionais do que correspondência de um seletor a um elemento com base exclusiva no nome da classe.

Reduzir o número de elementos estilizados

Outra consideração de desempenho e, muitas vezes, mais importante do que o seletor complexidade, é a quantidade de trabalho que precisa acontecer quando um elemento muda.

Em termos gerais, o custo do pior caso do cálculo do estilo dos elementos computados é o número de elementos multiplicado pela contagem do seletor, porque o navegador precisa verificar cada elemento pelo menos uma vez em relação a todos os estilos para ver se ele correspondências.

Os cálculos de estilo podem visar alguns elementos diretamente em vez de invalidar a página inteira. Em navegadores modernos, isso tende a ser menos problemático, pois o navegador não precisa verificar sempre todos os elementos que as mudanças podem afetar. Por outro lado, os navegadores mais antigos nem sempre são otimizados para essas tarefas. Onde possível, reduza o número de elementos invalidados.

Meça o custo de recálculo de estilo

Há algumas maneiras de medir o custo do recálculo de estilo em no navegador. Cada uma delas depende de se você quer medir ou não no navegador no seu ambiente de desenvolvimento ou se quiser medir a duração desse processo para usuários reais em seu site.

Medir o custo de recálculo de estilo no Chrome DevTools

Uma maneira de medir o custo dos recálculos de estilo é usar a métrica de desempenho no Chrome DevTools. Faça o seguinte para começar:

  1. Abra o DevTools.
  2. Acesse a guia Desempenho.
  3. Marque a caixa de seleção Estatísticas do seletor (opcional).
  4. Clique em Gravar.
  5. Interaja com a página.

Quando a gravação for interrompida, você verá algo parecido com esta imagem:

DevTools mostrando cálculos de estilo.
Um relatório do DevTools mostrando cálculos de estilo.

A faixa no topo é um diagrama de chamas em miniatura que também traça quadros por segundo. Quanto mais perto a atividade estiver do fundo da tira, mais rápido frames são pintados pelo navegador. Se o Flame Chart estiver diminuindo. com barras vermelhas no topo, então há um trabalho que está causando frames de longa duração.

Aumentando o zoom
    uma área de problemas no Chrome DevTools no resumo de atividades do
    painel de desempenho no Chrome DevTools.
Frames de longa duração na atividade do DevTools resumo.

Frames de longa duração durante uma interação, como a rolagem, precisam ser mais próximos. olhar Se você vir um grande bloco roxo, aumente o zoom na atividade e selecione qualquer trabalho rotulado Recalcular estilo para obter mais informações sobre um trabalho caro de recálculo de estilo.

Receber o
    detalhes de cálculos de estilo de longa duração, incluindo informações vitais, como
    como a quantidade de elementos afetados pelo trabalho de recálculo de estilo.
Um recálculo de estilo de longa duração, que leva apenas mais de 25&nbspms no resumo do DevTools.

Clique no evento para ver a pilha de chamadas. Se o trabalho de renderização foi causado por um interação do usuário, ele chama o JavaScript que acionou a alteração de estilo. Ele também mostra o número de elementos afetados pela mudança, pouco mais de 900 neste caso, e quanto tempo levou o cálculo do estilo. Você pode usar isso informações para começar a tentar encontrar uma correção em seu código.

Se você tiver marcado a caixa de seleção Estatísticas do seletor nas configurações do Painel de desempenho antes de fazer um trace, no trace terá uma guia adicional com o mesmo nome.

A tabela de estatísticas do seletor de CSS
    aparece no painel de desempenho do Chrome DevTools. Esta tabela contém
    cabeçalhos e os dados correspondentes, como tempo decorrido, correspondência
    de tentativas, contagem de correspondências, porcentagem de nós não correspondentes, seletores e
    folha de estilo em que podem ser encontradas.
A tabela de estatísticas do seletor, conforme mostrada no painel de desempenho do Chrome do DevTools.

Esse painel fornece dados úteis sobre o custo relativo de cada seletor, permitindo identificar seletores de CSS caros.

Para mais informações, consulte a documentação de estatísticas do seletor de CSS.

Medir o custo do recálculo de estilo para usuários reais

Se você quiser saber quanto tempo leva para que o recálculo de estilo ocorra para usuários reais do seu site, a API Long Animation Frames fornece as ferramentas necessárias para isso. Os dados desta API foram adicionados ao web-vitals biblioteca JavaScript, incluindo a hora de recálculo do estilo.

Se você suspeitar que o atraso na apresentação de uma interação é o principal motivo contribui para o INP de uma página, convém descobrir quanto desse tempo recalculando estilos na página. Para mais informações, leia sobre como medir a hora de recálculo do estilo no campo.

Recursos

Imagem principal do Unsplash, por Markus Spiske.