As animações da Web podem melhorar significativamente a experiência do usuário, mas também podem afetar o desempenho do site se não forem implementadas com cuidado. Neste artigo, compararei três abordagens diferentes para animar um elemento circular que pulsa em tamanho. Usarei CSS, JavaScript não otimizado e JavaScript otimizado e mostrarei como medir seu desempenho usando o Chrome DevTools.

Introdução às animações da Web

As animações são uma parte fundamental do web design moderno. Eles podem ser implementados usando vários métodos, mais comumente com CSS ou JavaScript puro. No entanto, nem todos os métodos funcionam igualmente bem. Para demonstrar isso, decidi testar três abordagens diferentes:

• Animações criadas com CSS.
• Animações não otimizadas usando JavaScript.
• Animações otimizadas usando JavaScript com requestAnimationFrame.

Configurando o Projeto

O projeto está disponível no GitHub. Você pode facilmente baixar e experimentar.

git clone https://github.com/TomasDevs/animation-performance-test.git
teste de desempenho de animação de CD

Depois de baixá-lo, verifique as pastas css-animation, js-animation-optimized e js-animation-unoptimized.

Experimente o projeto no GitHub

Medindo o Desempenho

Para medir o desempenho, usei o painel Desempenho do Chrome DevTools. Cada animação foi executada por 10 segundos.

Resultados e análises de desempenho

Animação CSS

Fonte: Criado por TomasDevs (2024)

• Tempo total de bloqueio: 390 ms

Notas:
As animações CSS tendem a ter melhor desempenho porque são transferidas para o mecanismo de renderização nativo do navegador, especialmente ao trabalhar com propriedades como transformação ou opacidade. Esta animação é altamente eficiente com impacto mínimo nos tempos de script e renderização.

Animação JavaScript otimizada

Fonte: Criado por TomasDevs (2024)

• Tempo total de bloqueio: 400 ms

Notas:
A versão JS otimizada usa requestAnimationFrame e uma função de onda senoidal suave para gerenciar a animação. Embora exija mais tempo de script do que animações CSS, ele ainda funciona com bastante eficiência e mantém baixos os tempos de renderização e pintura.

Animação JavaScript não otimizada

Fonte: Criado por TomasDevs (2024)

• Tempo total de bloqueio: 440 ms

Notas:
A versão JS não otimizada usa um loop simples sem considerar a progressão do tempo. Isso leva a tempos de script, renderização e pintura muito maiores devido a cálculos ineficientes para cada quadro da animação.

Conclusão

• animações CSS são as mais eficientes em geral para animações simples. Eles se beneficiam da aceleração de hardware pelo navegador e reduzem a carga no thread principal.
• As animações JavaScript otimizado vêm em segundo lugar. Quando você precisa de um controle mais dinâmico sobre animações, otimizar com requestAnimationFrame é essencial para garantir um desempenho suave.
• As animações JavaScript não otimizadas têm o pior desempenho, pois sobrecarregam desnecessariamente o mecanismo de renderização do navegador devido a cálculos ineficientes.

Participe da discussão

Quais são suas experiências com otimização de animações da web? Você tem dicas ou truques adicionais para aumentar o desempenho? Deixe-me saber nos comentários abaixo!