Os navegadores modernos podem animar duas propriedades CSS de forma econômica: transform e opacity.
Se você animar qualquer outra coisa, provavelmente não vai atingir 60 quadros por segundo (QPS).
Esta postagem explica o motivo.
Performance e frame rate da animação
É amplamente aceito que uma taxa de frames de 60 QPS é o objetivo ao animar qualquer coisa na Web. Essa taxa garante que as animações pareçam suaves. Na Web, um frame é o tempo necessário para fazer todo o trabalho necessário para atualizar e renderizar a tela. Se cada frame não for concluído em 16,7 ms (1.000 ms / 60 ≈ 16,7), os usuários vão perceber o atraso.
O pipeline de renderização
Para mostrar algo em uma página da Web, o navegador precisa seguir estas etapas sequenciais:
- Estilo: calcula os estilos que se aplicam aos elementos.
- Layout: gere a geometria e a posição de cada elemento.
- Pintar: preencha os pixels de cada elemento.
- Composto: separe os elementos em camadas e desenhe-as na tela.
Essas quatro etapas são conhecidas como pipeline de renderização do navegador.
Quando você anima algo em uma página que já foi carregada, essas etapas precisam acontecer novamente. Esse processo começa na etapa que precisa ser alterada para permitir que a animação aconteça.
Como mencionado antes, essas etapas são sequenciais. Por exemplo, se você animar algo que muda o layout, as etapas de pintura e composição também precisarão ser executadas novamente. Portanto, animar algo que muda o layout é mais caro do que animar algo que muda apenas a composição.
Animação de propriedades de layout
As mudanças de layout envolvem o cálculo da geometria (posição e tamanho) de todos os elementos afetados pela mudança.
Se você mudar um elemento, talvez seja necessário recalcular a geometria de outros.
Por exemplo, se você mudar a largura do elemento <html>, qualquer um dos filhos dele poderá ser afetado.
Devido à forma como os elementos transbordam e se afetam, as mudanças mais abaixo na árvore às vezes podem resultar em cálculos de layout até o topo.
Quanto maior a árvore de elementos visíveis, mais tempo leva para realizar os cálculos de layout.
Como animar propriedades de pintura
Renderização é o processo de determinar em que ordem os elementos devem ser renderizados na tela. Muitas vezes, é a tarefa mais longa de todas no pipeline.
A maioria das renderizações em navegadores modernos é feita em rasterizadores de software. Dependendo de como os elementos no seu app são agrupados em camadas, outros elementos além daquele que mudou também podem precisar ser renderizados.
Animação de propriedades compostas
Composição é o processo de separar a página em camadas, converter as informações sobre como a página deve aparecer em pixels (rasterização) e juntar as camadas para criar uma página (composição).
Por isso, a propriedade opacity está incluída na lista de coisas que são baratas de animar.
Desde que essa propriedade esteja em uma camada própria, as mudanças nela podem ser processadas pela GPU durante a etapa de composição.
Navegadores baseados no Chromium e no WebKit criam uma nova camada para qualquer elemento que tenha uma transição ou animação CSS em opacity.
O que é uma camada?
Ao colocar os elementos que serão animados ou transicionados em uma nova camada, o navegador só precisa renderizar esses itens, e não todo o resto. Talvez você conheça o conceito de camada do Photoshop, que contém vários elementos que podem ser movidos juntos. As camadas de renderização do navegador são semelhantes a essa ideia.
Embora o navegador faça um bom trabalho ao tomar decisões sobre quais elementos devem estar em uma nova camada, se ele perder um, há maneiras de forçar a criação de camadas. Saiba mais em Como criar animações de alta performance. No entanto, a criação de novas camadas precisa ser feita com cuidado, porque cada uma delas usa memória. Em dispositivos com memória limitada, a criação de novas camadas pode causar um problema de desempenho maior do que aquele que você está tentando resolver. Além disso, as texturas de cada camada precisam ser enviadas para a GPU. Portanto, é possível que você encontre restrições de largura de banda entre a CPU e a GPU.
Performance de CSS x JavaScript
Você pode se perguntar: é melhor usar CSS ou JavaScript para animações do ponto de vista da performance?
As animações baseadas em CSS e as animações da Web (nos navegadores que oferecem suporte à API) geralmente são processadas em uma linha de execução conhecida como linha de execução do compositor. Isso é diferente da thread principal do navegador, em que o estilo, o layout, a pintura e o JavaScript são executados. Isso significa que, se o navegador estiver executando algumas tarefas caras na linha de execução principal, essas animações poderão continuar sem serem interrompidas.
Conforme explicado neste artigo, outras mudanças em transformações e opacidade também podem ser processadas pela linha de execução do compositor em muitos casos.
Se alguma animação acionar pintura, layout ou ambos, a linha de execução principal precisará fazer o trabalho. Isso é válido para animações CSS e JavaScript, e a sobrecarga de layout ou pintura provavelmente vai diminuir qualquer trabalho associado à execução de CSS ou JavaScript, tornando a questão irrelevante.