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:
- Abra o DevTools.
- Acesse a guia Desempenho.
- Marque a caixa de seleção Estatísticas do seletor (opcional).
- Clique em Gravar.
- Interaja com a página.
Quando a gravação for interrompida, você verá algo parecido com esta imagem:
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.
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.
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.
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
- Estatísticas do seletor no Chrome DevTools
- Invalidação de estilo no Blink
- Interação com a Next Paint (INP)
- A biblioteca JavaScript
web-vitals - Medir o tempo de recálculo do estilo no campo
Imagem principal do Unsplash, por Markus Spiske.