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 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
outranslateZ
. - 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: transform
s e opacity
:
A ressalva para o uso de transform
s 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.
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.
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.