Understanding and Optimizing Web Animation Performance

The author announces a series of technical logs on web animation performance, using the 360 Search PC weather animation (a canvas‑based project with 14 scenes) as a concrete example.

Quantifying Smooth Animation

Animation relies on the visual persistence phenomenon; smoothness is perceived when the browser maintains around 60 fps, while below 30 fps noticeable stutter occurs.

Related Concepts

Frame : a single static picture in an animation.

Frames per second (FPS) : number of frames displayed each second.

Frame duration : how long a frame stays on screen, usually measured in milliseconds.

Dropped frames : when a frame takes much longer than average, causing subsequent frames to be skipped.

FPS Meter

Chrome's built‑in FPS meter can highlight repaint regions, draw frame‑rate graphs, and show GPU cache usage. The article also mentions stats.js as a cross‑browser alternative for monitoring frame rates.

Browser Rendering Mechanism

Modern browsers use two main threads: the main thread (handling JavaScript execution, style calculation, layout, and painting) and the compositor thread (GPU‑accelerated rasterization and compositing). Long‑running JavaScript or heavy layout work blocks the main thread, leading to jank.

The rendering pipeline consists of five stages: JavaScript, style calculation, layout, paint, and compositing. Depending on which properties change, browsers may follow one of three optimized pipelines:

1. JS/CSS → style → layout → paint → composite

2. JS/CSS → style → paint → composite

3. JS/CSS → style → composite

Optimizing animations means keeping changes within the third pipeline whenever possible.

CPU vs. GPU

CPU excels at serial logic and control flow, while GPU is designed for massive parallel computation, making it ideal for bitmap rasterization, repeated drawing, transformations, and simple arithmetic on large data sets. The article illustrates this with an analogy of a professor (CPU) delegating tasks to many students (GPU ALUs).

GPU advantages include fast bitmap drawing, repeated rendering, and parallel data processing; its drawback is the overhead of uploading textures to video memory.

JS Animation vs. CSS Animation

JS animations run on the main thread and can be blocked by other tasks, but they offer fine‑grained control (start, pause, reverse). CSS animations are declarative, can be off‑loaded to the compositor for GPU acceleration, but lack dynamic control.

Chrome creates separate layers (and thus GPU acceleration) when certain conditions are met, such as 3D transforms, video elements, canvas with WebGL, opacity animations, or elements that trigger compositing.

Future Outlook

The author hints at using Web Workers for multithreaded animation processing and invites readers to follow the upcoming second part of the series.