As animações precisam ter um bom desempenho, caso contrário, afetarão negativamente a experiência do usuário.
Mantenha 60 fps sempre que estiver animando, porque um valor menor resulta em falhas ou interrupções que serão perceptíveis para os usuários e impactarem negativamente a experiência deles.
- 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-changepara garantir que o navegador saiba o que você planeja animar.
A animação de propriedades não é sem custo financeiro, e algumas propriedades são mais baratas do que outras. Por exemplo, animar width e height de um elemento altera a 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 for acionado, a página ou parte dela normalmente precisará 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 mais recentes, isso significa limitar as animações a opacity ou transform, sendo que ambas podem ser altamente otimizadas. 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
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. Não use will-change excessivamente, porque isso pode fazer com que o navegador desperdice recursos, o que 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 seu aplicativo, é recomendável usar will-change em elementos de animação. Na maioria dos casos, qualquer elemento na visualização atual do app que você pretende animar precisa ter o will-change ativado para todas as propriedades a serem alteradas. 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;
}
Já os navegadores compatíveis, atualmente os navegadores mais modernos, farão as otimizações adequadas em segundo plano para oferecer suporte à alteração ou animação dessas propriedades.
Performance de CSS em comparação com JavaScript
Há muitas conversas de páginas e comentários na Web que discutem os méritos relativos das animações CSS e JavaScript do ponto de vista do desempenho. Aqui estão alguns pontos que você deve ter em mente:
Animações baseadas em CSS e animações da Web com suporte nativo geralmente são gerenciadas em uma linha de execução conhecida como "linha de execução de composição". Isso é diferente da "linha de execução 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 serem interrompidas.
Outras mudanças em transformações e opacidade podem, em muitos casos, também ser gerenciadas 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 realizar o trabalho. Isso é verdadeiro para animações baseadas em CSS e JavaScript, e a sobrecarga de layout ou pintura provavelmente minimizará qualquer trabalho associado à execução de CSS ou JavaScript, tornando a questão discutível.