Animações e desempenho

As animações precisam ter um bom desempenho, caso contrário, afetarão negativamente a experiência do usuário.

Sam Thorogood

Mantenha 60 fps sempre que você estiver animando, porque qualquer valor menor resulta em travamentos ou interrupções que serão perceptíveis pelos seus usuários e impactar negativamente suas experiências.

  • Tome cuidado para que suas animações não causem problemas de desempenho. Conheça o impacto da animação de uma determinada propriedade CSS.
  • Animar propriedades que mudam a geometria da página (layout) ou causam pinturas são particularmente caras.
  • Sempre que possível, opte pela mudança de transformações e opacidade.
  • Use will-change para garantir que o navegador saiba o que você planeja animar.

Animar propriedades não é sem custo financeiro, e algumas delas são mais baratas do que outras. Por exemplo, animar o width e o height de um elemento muda sua geometria e pode fazer com que outros elementos na página se movam ou mudem de tamanho. Esse processo é chamado de layout (ou reflow em navegadores baseados em Gecko, como o Firefox) e pode ser caro se a página tiver muitos elementos. Sempre que o layout é acionado, a página ou parte dela normalmente precisa ser pintada, o que costuma ser ainda mais caro do que a própria operação de layout.

Sempre que possível, evite animar propriedades que acionam layout ou pintura. Para a maioria dos navegadores mais recentes, isso significa limitar as animações a opacity ou transform. Ambos podem ser altamente otimizados pelo navegador. Não importa se a animação é gerenciada por JavaScript ou CSS.

Leia um guia completo sobre como criar animações de alto desempenho.

Como usar a propriedade will-change

Compatibilidade com navegadores

  • 36
  • 79
  • 36
  • 9.1

Origem

Use o will-change para garantir que o navegador saiba que você pretende mudar a propriedade de um elemento. Isso permite que o navegador implemente as otimizações mais adequadas antes de você fazer a alteração. Não use will-change em excesso, porque isso pode fazer com que o navegador desperdice recursos e isso, por sua vez, causa ainda mais problemas de desempenho.

A regra geral é que, se a animação for acionada nos próximos 200 ms, seja pela interação de um usuário ou devido ao estado do aplicativo, usar will-change nos elementos de animação é uma boa ideia. Na maioria dos casos, qualquer elemento na visualização atual do app que você pretende animar precisa ter a will-change ativada para as propriedades que você planeja mudar. No caso do exemplo de caixa que usamos nos guias anteriores, a adição de will-change para transformações e opacidade tem a seguinte aparência:

.box {
  will-change: transform, opacity;
}

Já os navegadores compatíveis, atualmente mais modernos, farão as otimizações adequadas em segundo plano para oferecer suporte à alteração ou animação dessas propriedades.

Performance do CSS vs. JavaScript

Existem muitas páginas e sequências de comentários na Web que discutem os méritos relativos das animações CSS e JavaScript do ponto de vista do desempenho. Veja alguns pontos a serem considerados:

  • Animações baseadas em CSS e animações da Web com suporte nativo geralmente são gerenciadas em um thread conhecido como "thread compositor". Isso é diferente do "thread principal" do navegador, em que estilo, layout, pintura e JavaScript são executados. Isso significa que, se o navegador estiver executando algumas tarefas caras na linha de execução principal, essas animações podem continuar sem ser interrompidas.

  • Outras alterações em transformações e opacidade podem, em muitos casos, também ser gerenciadas pelo thread do compositor.

  • Se alguma animação acionar uma pintura, um layout ou ambos, a "linha de execução principal" será necessária para funcionar. Isso é verdade para animações com base em CSS e JavaScript, e o overhead do layout ou da pintura provavelmente diminuirá qualquer trabalho associado à execução de CSS ou JavaScript, tornando a questão discutível.