Las animaciones web pueden mejorar significativamente la experiencia del usuario, pero también pueden afectar el rendimiento del sitio web si no se implementan con cuidado. En este artículo, compararé tres enfoques diferentes para animar un elemento circular que varía en tamaño. Usaré CSS, JavaScript no optimizado y JavaScript optimizado, y te mostraré cómo medir su rendimiento usando Chrome DevTools.

Introducción a las animaciones web

Las animaciones son una parte clave del diseño web moderno. Se pueden implementar utilizando varios métodos, más comúnmente con CSS o JavaScript puro. Sin embargo, no todos los métodos funcionan igual de bien. Para demostrar esto, decidí probar tres enfoques diferentes:

• Animaciones creadas con CSS.
• Animaciones no optimizadas usando JavaScript.
• Animaciones optimizadas usando JavaScript con requestAnimationFrame.

Configurando el proyecto

El proyecto está disponible en GitHub. Puedes descargarlo y probarlo fácilmente.

clon de git https://github.com/TomasDevs/animation-performance-test.git
prueba-de-rendimiento-de-animación-en-cd

Una vez que lo hayas descargado, revisa las carpetas css-animation, js-animation-optimized y js-animation-unptimized.

Prueba el proyecto en GitHub

Medición del desempeño

Para medir el rendimiento, utilicé el panel de rendimiento de Chrome DevTools. Cada animación se ejecutó durante 10 segundos.

Resultados y análisis de rendimiento

Animación CSS

Fuente: Creado por TomasDevs (2024)

• Tiempo total de bloqueo: 390 ms

Notas:
Las animaciones CSS tienden a funcionar mejor porque se descargan en el motor de renderizado nativo del navegador, especialmente cuando se trabaja con propiedades como transformación u opacidad. Esta animación es muy eficiente con un impacto mínimo en los tiempos de secuencias de comandos y renderizado.

Animación JavaScript optimizada

Fuente: Creado por TomasDevs (2024)

• Tiempo total de bloqueo: 400 ms

Notas:
La versión JS optimizada utiliza requestAnimationFrame y una función de onda sinusoidal suave para gestionar la animación. Si bien requiere más tiempo de programación que las animaciones CSS, aún se ejecuta de manera bastante eficiente y mantiene bajos los tiempos de renderizado y pintura.

Animación JavaScript no optimizada

Fuente: Creado por TomasDevs (2024)

• Tiempo total de bloqueo: 440 ms

Notas:
La versión JS no optimizada utiliza un bucle simple sin tener en cuenta la progresión del tiempo. Esto lleva a tiempos de secuencias de comandos, renderizado y pintura mucho más altos debido a cálculos ineficientes para cada fotograma de la animación.

Conclusión

• Las animaciones CSS son ​​las más eficientes en general para animaciones simples. Se benefician de la aceleración de hardware por parte del navegador y reducen la carga en el hilo principal.
• Las animaciones de JavaScript optimizadas ocupan el segundo lugar. Cuando necesitas un control más dinámico sobre las animaciones, optimizar con requestAnimationFrame es esencial para garantizar un rendimiento fluido.
• Las animaciones de JavaScript no optimizadas funcionan peor, ya que ejercen una presión innecesaria sobre el motor de renderizado del navegador debido a cálculos ineficientes.

Únase a la discusión

¿Cuáles son sus experiencias con la optimización de animaciones web? ¿Tiene algún consejo o truco adicional para mejorar el rendimiento? ¡Déjamelo saber en los comentarios a continuación!