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.

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

Há dois fatores principais nesta á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

  • Limite-se a mudanças de transform e opacity nas animações.
  • Promova elementos movimentáveis com will-change ou translateZ.
  • Evite usar muitas regras de promoção; as camadas exigem mais memória e gerenciamento.

Usar mudanças de transform e opacity para animações

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

O pipeline de pixels sem layout ou coloração.

Para isso, você precisará se limitar a mudar propriedades que podem ser tratadas apenas pelo compositor. Atualmente, existem apenas duas propriedades onde isso é verdade: transforms e opacity:

As propriedades que podem ser animadas sem acionar o layout ou a coloração.

A limitação do uso de transforms e opacity é que o elemento em que essas propriedades são alteradas deve estar na própria camada do compositor. Para criar uma camada, você deve promover o elemento. Veremos esse tópico a seguir.

Promova os elementos que serão animados

Como mencionado na seção "Simplificar a complexidade da pintura e reduzir as áreas de pintura", promova elementos a serem animados (com bom senso, sem exageros!) para sua própria camada:

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

Ou, para navegadores mais antigos ou que não permitem will-change:

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

Gerenciar camadas e evitar um número excessivo de camadas

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

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

O que é uma forma indireta de dizer que você quer promover todos os elementos da página. O problema é que cada camada criada exige memória e gerenciamento, e isso gera custos. Na verdade, em dispositivos com memória limitada, o impacto negativo sobre o desempenho pode superar qualquer benefício da criação da camada. Cada textura de camada precisa ser carregada na GPU. Portanto, há mais restrições em termos de largura de banda entre a CPU e a GPU e de memória disponível para texturas na GPU.

Usar o Chrome DevTools para compreender as camadas do app

A ativação do gerador de perfis de coloração no Chrome DevTools.

Para entender as camadas do aplicativo e por que um elemento tem uma camada, ative o gerador de perfis de coloração no Timeline do Chrome DevTools:

Após a ativação, faça uma gravação. Quando a gravação for finalizada, você poderá clicar em quadros individuais que se encontram entre barras de quadros por segundo e os detalhes:

Um frame para o qual o desenvolvedor quer gerar um perfil.

Clique no quadro para exibir uma nova opção nos detalhes: uma guia Layer.

O botão da guia "Layer" no Chrome DevTools.

Essa opção vai exibir uma nova visualização que permite deslocar, percorrer e aumentar o zoom em todas as camadas durante esse frame, bem como os motivos pelos quais cada camada foi criada.

A visualização de camadas no Chrome DevTools.

Com essa visualização, você pode controlar o número de camadas. Se você estiver gastando muito tempo na composição durante ações críticas de desempenho, como rolagem ou transições (o ideal é algo em torno de 4 a 5 ms), poderá usar essas informações para verificar o número de camadas, por quê elas foram criadas e, a partir desse ponto, gerenciar as contagens de camadas no app.