Skip to content
Optimal Lab

Frontend · interactive

Style, layout, paint and composite

After your code changes the page, the browser redoes some of its work to update the pixels. What you change decides how much. Change the right property and an animation runs smoothly; change the wrong one and it stutters.

el.style.width = '300px'

  1. JavaScript→
  2. Style→
  3. Layout→
  4. Paint→
  5. Composite

Work per frame9 ms of a 16.7 ms budget (60 fps)

Fits in one frame.

Size changes move other boxes, so layout runs for the whole affected area, then everything repaints.

What your code changes

Step 1 of 4

  1. 1

    Style: which rules apply

    Recalculate the CSS that applies to changed elements.

    Cheap for a few elements.

  2. 2

    Layout: where every box goes

    Width, height, top, margins and font size change geometry, and one box can push many others. Usually the most expensive stage.

    Runs for this change.

  3. 3

    Paint: fill in the pixels

    Text, colours, borders and shadows are drawn into layers.

    Runs for this change.

  4. 4

    Composite: stack the layers

    The compositor positions finished layers, often on the GPU. Animate transform and opacity and only this step runs.

    Read layout values in one pass, then write in another, to avoid thrashing.

In production

Tools and technologies

Browser devtools show exactly which pipeline stages each frame runs.

Not tied to one language — use these names when you search docs or design a system.