Evite animações não compostas

Published on

Translated to: English, Español, 한국어, 中文, Pусский, 日本語

Animações não compostas podem parecer irregulares (ou seja, não suaves) em telefones de baixo custo ou quando tarefas de alto desempenho estiverem sendo executadas no thread principal. As animações Janky podem aumentar o Cumulative Layout Shift (CLS) da sua página. Reduzir o CLS melhorará sua pontuação de desempenho do Lighthouse.

Fundo

Os algoritmos do navegador para converter HTML, CSS e JavaScript em pixels são conhecidos coletivamente como pipeline de renderização.

O pipeline de renderização consiste nas seguintes etapas sequenciais: JavaScript, Estilo, Layout, Pintura, Composto.
O pipeline de renderização.

Tudo bem se você não entender o que significa cada etapa do pipeline de renderização. O principal a ser entendido agora é que, em cada etapa do pipeline de renderização, o navegador usa o resultado da operação anterior para criar novos dados. Por exemplo, se o seu código faz algo que acione o Layout, as etapas de pintura e composição precisam ser executadas novamente. Uma animação não composta é qualquer animação que acione uma das etapas anteriores no pipeline de renderização (Estilo, Layout ou Pintura). As animações não compostas têm pior desempenho porque forçam o navegador a trabalhar mais.

Confira os seguintes recursos para aprender mais sobre o pipeline de renderização:

Como o Lighthouse detecta animações não compostas

Quando uma animação não pode ser composta, o Chrome relata os motivos da falha para o rastreamento do DevTools, que é o que o Lighthouse lê. O Lighthouse lista os nós DOM que têm animações que não foram compostas junto com o(s) motivo(s) da falha para cada animação.

Como garantir que as animações sejam compostas

Consulte Atenha-se às propriedades somente do compositor e gerencie a contagem de camadas e animações de alto desempenho .

Recursos

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.