Charts · 07

What a CSS property costs

Change a property and the browser has to redo some of its pipeline: style, then maybe layout, then maybe paint, then composite. 55 common properties, sorted into the three columns by how far back they send it. Only 6 live in the cheap column, and two of those, transform and opacity, are the whole reason smooth animation is possible.

  1. 1Style
  2. 2Layout
  3. 3Paint
  4. 4Composite

Layout · Position

top

Geometry changes, so the browser recomputes positions and sizes (possibly of the whole tree), then repaints and composites. The expensive one.

Animating top or left lays out every frame. Use transform: translate() instead.

Layout 33

StyleLayoutPaintComposite

Paint 16

StylePaintComposite

Composite only 6

StyleComposite

Notes

Categories are for Blink (Chromium) and describe the typical case; engines differ at the edges and keep moving properties down the list (filter and clip-path composite on promoted layers, for instance). Layout also implies paint and composite; paint implies composite. Sources: Chromium, Life of a Pixel and RenderingNG; Paul Lewis, Rendering performance (web.dev); the csstriggers.com data, Google, 2019 snapshot; Jake Archibald, In the loop.