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 exibição 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 que você usa para animações.

Resumo

• Limite-se a mudanças de transform e opacidade para suas animações.
• Promova elementos móveis com will-change ou translateZ.
• Evite o uso excessivo das regras de promoção. As camadas exigem memória e gerenciamento.

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

A versão de melhor desempenho do pipeline de pixels evita o layout e a pintura e exige apenas alterações de composição:

Para fazer isso, você precisa se limitar a mudanças de propriedades que podem ser tratadas apenas pelo compositor. Hoje, existem apenas duas propriedades em que isso é verdade: 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, é preciso promover o elemento, que será abordado a seguir.

Observação : se você não souber limitar as animações apenas a essas propriedades, consulte o Princípio FLIP (link em inglês), que pode ajudar a remapear animações para mudanças em transformações e opacidade de propriedades mais caras.

Promova os elementos que você planeja animar

Como mencionamos na seção Simplificar a complexidade da pintura e reduzir as áreas de pintura, promova os elementos que você planeja animar para uma camada própria:

.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);
}

Gerencie camadas e evite explosões de camadas

Sabendo que 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);
}

O que é uma maneira indireta de dizer que você gostaria de promover cada elemento da página. O problema é que cada camada criada exige memória e gerenciamento, o que não é sem custo financeiro. Na verdade, em dispositivos com memória limitada, o impacto no desempenho pode superar muito qualquer benefício da criação de uma camada. Como as texturas de cada camada precisam ser enviadas para a GPU, há mais restrições em termos de largura de banda entre CPU e GPU e memória disponível para texturas na GPU.

Aviso : não promova elementos desnecessariamente.

Usar o Chrome DevTools para entender as camadas do app

Para entender as camadas do aplicativo e por que um elemento tem uma camada, ative o criador de perfil de pintura na linha do tempo do Chrome DevTools:

Com essa opção ativada, você deve fazer uma gravação. Quando a gravação terminar, você poderá clicar em quadros individuais, encontrados entre as barras de quadros por segundo e os detalhes:

Clique nele para abrir uma nova opção nos detalhes: uma guia de camada.

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

Usando essa visualização, você pode controlar o número de camadas que você tem. Se você estiver gastando muito tempo na composição durante ações críticas para o desempenho, como rolagem ou transições (o ideal é ter de 4 a 5 ms), você 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 seu app.