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, pois um valor inferior resultará em saltos ou tremidas que serão observados pelos seus usuários e afetarão negativamente a experiência.

  • 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 transforms e opacity.
  • Use will-change para garantir que o navegador saiba o que você planeja animar.

Animar propriedades não é gratuito e algumas propriedades são mais baratas do que outras. Por exemplo, animar a width e a height de um elemento muda a geometria dele e pode fazer com que outros elementos da página se movam ou mudem de tamanho. Esse processo é chamado de layout (ou refluxo 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 normalmente é 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 modernos, 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

  • Chrome: 36.
  • Edge: 79.
  • Firefox: 36.
  • Safari: 9.1.

Origem

Use will-change para garantir que o navegador saiba que você pretende mudar a propriedade de um elemento. Isso permite que o navegador realize as otimizações mais adequadas antes de fazer a alteração. No entanto, não use will-change excessivamente, pois isso pode fazer com que o navegador desperdice recursos, o que, por sua vez, causa ainda mais problemas de desempenho.

A regra geral é que, se a animação puder ser acionada nos próximos 200 ms, seja pela interação de um usuário ou por causa do estado do seu aplicativo, ter will-change em elementos de animação é uma boa escolha. 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, ao adicionar will-change para transformações e opacidade, teremos o seguinte resultado:

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

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

Performance do CSS vs. JavaScript

Há muitos encadeamentos de páginas e comentários na Web que discutem os méritos relativos das animações CSS e JavaScript de uma perspectiva de desempenho. 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, no qual 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 podem continuar sem ser interrompidas.

  • Outras alterações em transformações e opacidade podem, em muitos casos, também ser gerenciadas pelo encadeamento de composição.

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