Usar apenas propriedades do compositor e gerenciar o número de camadas

A composição é o agrupamento das partes pintadas da página para exibição na tela.

Paul Lewis

A composição é o agrupamento das partes pintadas da página para exibidos na tela.

Há dois fatores principais nessa área que afetam o desempenho da página: o número de camadas do compositor que precisam ser gerenciadas e as propriedades usadas para animações.

Resumo

• Limitar-se a mudanças de transformação e opacidade para suas animações.
• Promova elementos móveis com will-change ou translateZ.
• Evite usar muitas regras de promoção. precisam de memória e gerenciamento.

Usar mudanças de transformação e opacidade para animações

A versão do pipeline de pixels com o melhor desempenho evita o layout e a pintura, exigindo apenas mudanças de composição:

Para isso, você precisará se limitar a alterar propriedades que podem ser processadas apenas pelo compositor. Atualmente, há apenas duas propriedades em que isso é verdadeiro: transforms e opacity:

A ressalva para o uso de transforms e opacity é que o elemento em que você muda essas propriedades precisa estar na própria camada do compositor. Para criar uma camada, você precisa promover o elemento, o que será abordado a seguir.

Observação : se você estiver preocupado que talvez não consiga limitar suas animações apenas a essas propriedades, consulte o Princípio FLIP, que pode ajudar você a remapear animações para mudanças em transformações e opacidade de propriedades mais caras.

Promover elementos que serão animados

Como mencionamos no tópico "Simplificar a complexidade da pintura e reduzir as áreas de pintura" você deve promover os elementos que planeja animar (com bom senso, sem exagerar!) para sua própria camada:

.moving-element {
  will-change: transform;
}

Ou, para navegadores mais antigos ou que não são compatíveis com will-change:

.moving-element {
  transform: translateZ(0);
}

Gerenciar camadas e evitar explosões de camadas

Como as camadas geralmente ajudam no desempenho, pode ser tentador promover todos os elementos da página da seguinte forma:

* {
  will-change: transform;
  transform: translateZ(0);
}

Essa é uma forma indireta de dizer que você quer promover cada elemento da página. O problema é que cada camada criada requer memória e gerenciamento, e isso não é sem custo financeiro. Na verdade, em dispositivos com memória limitada, o impacto no desempenho pode superar qualquer benefício da criação de uma camada. É necessário fazer o upload das texturas de cada camada na GPU, portanto, há outras restrições em termos de largura de banda entre a CPU e a GPU e de memória disponível para texturas na GPU.

Aviso : não promova elementos desnecessariamente.

Use o Chrome DevTools para entender as camadas do seu app

Para entender as camadas do aplicativo e por que um elemento tem uma camada, ative o Paint Profiler no Chrome DevTools. Cronograma:

Com essa opção ativada, você deve fazer uma gravação. Quando a gravação for concluída, você poderá clicar em quadros individuais, que se encontram entre as barras de quadros por segundo e os detalhes:

Clique nele para ver uma nova opção nos detalhes: a guia "Layers".

Essa opção abrirá uma nova visualização que permite movimentar, digitalizar e aumentar o zoom em todas as camadas durante esse quadro, além dos motivos pelos quais cada camada foi criada.

Com essa visualização, você pode rastrear o número de camadas. Se você está gastando muito tempo na composição durante ações críticas para o desempenho, como rolagem ou transições (o ideal é algo em torno de 4 a 5 ms), pode usar essas informações para ver quantas camadas você tem, por que elas foram criadas e, a partir daí, gerenciar o número de camadas no app.