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:
![O pipeline de pixels sem layout ou pintura.](https://web.developers.google.cn/static/articles/stick-to-compositor-only-properties-and-manage-layer-count/image/the-pixel-pipeline-no-la-96825803c8cec.jpg?hl=pt)
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
:
![As propriedades que podem ser animadas sem acionar o layout ou a pintura.](https://web.developers.google.cn/static/articles/stick-to-compositor-only-properties-and-manage-layer-count/image/the-properties-can-anima-100ed2c7d26a4.jpg?hl=pt)
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
![Alternar o gerador de perfis de pintura no Chrome DevTools.](https://web.developers.google.cn/static/articles/stick-to-compositor-only-properties-and-manage-layer-count/image/the-toggle-the-paint-pro-0bfd1048bb7de.jpg?hl=pt)
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:
![Um frame que o desenvolvedor quer gerar um perfil.](https://web.developers.google.cn/static/articles/stick-to-compositor-only-properties-and-manage-layer-count/image/a-frame-developer-is-int-195784f471018.jpg?hl=pt)
Clique nele para abrir uma nova opção nos detalhes: uma guia de camada.
![Botão da guia de camada no Chrome DevTools.](https://web.developers.google.cn/static/articles/stick-to-compositor-only-properties-and-manage-layer-count/image/the-layer-tab-button-chr-b74ebc86acad5.jpg?hl=pt)
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.
![Visualização de camadas no Chrome DevTools.](https://web.developers.google.cn/static/articles/stick-to-compositor-only-properties-and-manage-layer-count/image/the-layer-view-chrome-de-04740f747ced7.jpg?hl=pt)
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.