0
Performance · Rendering Performance
New technique
The pixel pipeline
Smooth motion is a rhythm: strike, strike, strike - sixty times a second.
Every frame the browser may run up to five steps: JavaScript → Style (which rules apply) → Layout (sizes and positions) → Paint (fill in pixels) → Composite (stack the painted layers).
At 60 frames per second each frame gets about 16 ms, and the browser needs part of that for itself. Miss it, and the animation stutters: that's called jank.
The trick to smooth pages is doing less per frame: skip steps where you can, and keep JavaScript short.