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 usadas para animações.
Resumo
- Limitar-se a mudanças de transformação e opacidade para suas animações.
- Promova elementos movimentáveis com
will-change
outranslateZ
. - 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:
Para isso, você precisará se limitar a mudar propriedades que podem ser tratadas apenas pelo compositor. Atualmente, existem apenas duas propriedades onde isso é verdade: transform
s e opacity
:
A limitação do uso de transform
s 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 requer memória e gerenciamento, e isso não é sem custo financeiro. Na verdade, em dispositivos com memória limitada, o impacto negativo sobre o desempenho pode superar qualquer benefício da criação da 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.
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 Paint Profiler na linha do tempo 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:
Clique no quadro para exibir uma nova opção nos detalhes: uma guia Layer.
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.
Com essa visualização, você pode controlar o número de camadas. Se você estiver gastando muito tempo com 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), use 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.