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 é sem custo financeiro 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 for acionado, a página ou parte dela normalmente precisará ser pintada, o que é geralmente 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 animações para opacity ou transform. Ambas podem ser altamente otimizadas pelo navegador, não importando 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. Para a maioria dos casos, qualquer elemento na visualização atual do app que você pretende animar deve ter will-change ativado para qualquer propriedade a ser alterada. 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.

Desempenho 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 encadeamento conhecido como "encadeamento de composição". Isso é diferente do "encadeamento 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 no encadeamento principal, essas animações podem continuar sem interrupções.

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

  • Se qualquer animação acionar uma pintura, um layout ou ambos, o "encadeamento principal" será solicitado. 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.