Animações e desempenho

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

Mantenha 60 fps sempre que estiver animando, porque qualquer resultado menor resulta em falhas ou interrupções que serão notadas pelos usuários e vão afetar negativamente a experiência deles.

  • Tome cuidado para que as animações não causem problemas de desempenho. Confira se você sabe o impacto de animar uma determinada propriedade CSS.
  • Animar propriedades que mudam a geometria da página (layout) ou causam pintura é muito caro.
  • Sempre que possível, mude as transformações e a opacidade.
  • Use will-change para garantir que o navegador saiba o que você planeja animar.

A animação de propriedades não é sem custo financeiro, e algumas são mais baratas do que outras. Por exemplo, animar o width e o height de um elemento muda a geometria dele 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 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 o layout ou a pintura. Para a maioria dos navegadores modernos, isso significa limitar as animações a opacity ou transform, que podem ser altamente otimizadas pelo navegador. Não importa se a animação é processada por JavaScript ou CSS.

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

Como usar a propriedade will-change

Browser Support

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

Source

Use 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 mudança. No entanto, não use will-change em excesso, porque 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 pelo estado do aplicativo, é recomendável usar will-change nos elementos animados. Na maioria dos casos, qualquer elemento na visualização atual do app que você pretende animar precisa ter will-change ativado 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 fica assim:

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

Agora, os navegadores que oferecem suporte a ele, atualmente a maioria dos navegadores modernos, vão fazer as otimizações adequadas para oferecer suporte à alteração ou animação dessas propriedades.

Desempenho do CSS x JavaScript

Há muitas páginas e conversas sobre comentários na Web que discutem os méritos relativos das animações CSS e JavaScript do ponto de vista de performance. Confira alguns pontos importantes:

  • As animações baseadas em CSS e as animações da Web, quando compatíveis com ativamente, geralmente são processadas em uma linha de execução conhecida como "linha de execução do compositor". Isso é diferente da "linha de execução 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.

  • Em muitos casos, outras mudanças em transformações e opacidade também podem ser processadas pela linha de execução do compositor.

  • Se qualquer animação acionar a pintura, o layout ou ambos, a "linha de execução principal" será necessária para fazer o trabalho. Isso é válido para animações baseadas em CSS e JavaScript, e a sobrecarga de layout ou pintura provavelmente vai ofuscar qualquer trabalho associado à execução de CSS ou JavaScript, tornando a pergunta irrelevante.