What a Mutation Costs

1. 1
   Mutate

   Your write lands on the node object and sets invalidation flags on it and, depending on selectors, on ancestors or the whole document.

   fails by Writing a value identical to the current one, which some engines short-circuit and some do not.

2. 2
   Recalculate style

   Recomputes computed values for the invalidated set and compares them with the previous values to decide what to invalidate downstream.

   fails by Broad selectors or a class on a root element widening the invalidated set to the entire document (Specificity).

3. 3
   Layout

   Recomputes geometry for boxes whose inputs changed, propagating up to the containing block and down through descendants.

   fails by A change near the root with no containment boundary, so the whole document re-lays-out.

4. 4
   Paint

   Produces ordered drawing commands for the damaged regions and assigns them to layers.

   fails by A large damaged region on a high-DPI display, where raster cost scales with device pixels.

5. 5
   Composite

   Combines layers into a frame, on the compositor thread, and hands it to the display.

   fails by Too many layers to composite within the frame budget, or a layer too large to keep in GPU memory.

A change that enters at composite skips the three most expensive steps. A change that enters at style pays for all of them.

caveat Every row is context-dependent, and the maybe values are not hedging — they are the answer. Whether transform skips paint depends on whether the element already has a layer; whether a class costs layout depends on which properties it sets; whether style recalculation is scoped or document-wide depends on your selectors. Use the table to know which question to ask, then confirm the answer for your page in a Performance recording (Debugging Rendering and Jank).

• Interleaved: read 1 → forced layout — The first read flushes whatever was already dirty.
• Interleaved: read 2 → forced layout — The write above dirtied layout again, so this read pays for it again.
• Interleaved: write 3 + read 4 → forced layout — Cost grows linearly with the list. This is why it only shows up in production data.
• Batched: all four reads — One flush, then three free reads — nothing wrote in between.
• Batched: all four writes — Dirties layout once, and nothing reads it back.

The interleaved version produced no extra pixels for any of that extra layout. Every forced layout in it was thrown away by the next write.

for (const row of rows) {
  // read: layout is dirty from the previous write,
  // so the browser must run it now, synchronously
  const h = row.offsetHeight
  row.style.height = h * 2 + 'px'   // write: dirty again
}

// phase 1 — read everything. Layout runs at most once.
const heights = rows.map((row) => row.offsetHeight)

// phase 2 — write everything. Nothing reads, so nothing forces.
rows.forEach((row, i) => {
  row.style.height = heights[i] * 2 + 'px'
})

A layout read returns a value that must be correct *right now*, so the browser cannot defer pending layout past it. Separating the phases means there is exactly one dirty-to-clean transition instead of one per element, which turns n forced layouts into one scheduled layout.