Mastering Web Animations: CSS vs Unoptimized and Optimized JavaScript Performance

Web animations can significantly improve user experience but can also impact website performance if not implemented carefully. In this article, I will compare three different approaches to animating a circle element that pulses in size. I’ll be using CSS, unoptimized JavaScript, and optimized JavaScript, and I'll show you how to measure their performance using Chrome DevTools.

Introduction to Web Animations

Animations are a key part of modern web design. They can be implemented using various methods, most commonly with pure CSS or JavaScript. However, not every method performs equally well. To demonstrate this, I decided to test three different approaches:

• Animations created with CSS.
• Unoptimized animations using JavaScript.
• Optimized animations using JavaScript with requestAnimationFrame.

Setting Up the Project

The project is available on GitHub. You can easily download and try it out.

git clone https://github.com/TomasDevs/animation-performance-test.git
cd animation-performance-test

Once you have it downloaded, check the folders css-animation, js-animation-optimized, and js-animation-unoptimized.

Try the project on GitHub

Measuring Performance

To measure performance, I used Chrome DevTools' Performance panel. Each animation was run for 10 seconds.

Performance Results and Analysis

CSS Animation

Source: Created by TomasDevs (2024)

• Total Blocking Time: 390 ms

Notes:
CSS animations tend to perform better because they are offloaded to the browser's native rendering engine, especially when working with properties like transform or opacity. This animation is highly efficient with minimal impact on scripting and rendering times.

Optimized JavaScript Animation

Source: Created by TomasDevs (2024)

• Total Blocking Time: 400 ms

Notes:
The optimized JS version uses requestAnimationFrame and a smooth sine wave function to manage the animation. While it requires more scripting time than CSS animations, it still runs fairly efficiently and keeps the rendering and painting times low.

Unoptimized JavaScript Animation

Source: Created by TomasDevs (2024)

• Total Blocking Time: 440 ms

Notes:
The unoptimized JS version uses a simple loop without consideration for timing progression. This leads to much higher scripting, rendering, and painting times due to inefficient calculations for each frame of the animation.

Conclusion

• CSS animations are the most efficient overall for simple animations. They benefit from hardware acceleration by the browser and reduce the load on the main thread.
• Optimized JavaScript animations are a close second. When you need more dynamic control over animations, optimizing with requestAnimationFrame is essential to ensure smooth performance.
• Unoptimized JavaScript animations perform the worst, as they put unnecessary strain on the browser’s rendering engine due to inefficient calculations.

Join the Discussion

What are your experiences with optimizing web animations? Do you have any additional tips or tricks for boosting performance? Let me know in the comments below!