1.5.b — Reflow, Repaint, and Composite (Layout Thrash & CLS)

In one sentence: Reflow recomputes where boxes are; repaint redraws what they look like; compositing assembles layers — and unnecessary reflows are a classic source of jank, while unstable layout causes CLS.

Navigation: ← 1.5.a — Rendering pipeline · 1.5.c — Landmarks →

---

1. Vocabulary that interviews mix up

Term	Also called	What changed?
Reflow	Layout	Geometry — positions, sizes, line breaks
Repaint	Paint	Visuals — colors, shadows, text rasterization (no geometry change)
Recomposite	Composite only	Layer stack — often transform / opacity on a promoted layer

Rule of thumb: geometry changes are usually more expensive than “same box, different fill,” but huge repaints (full-screen gradients, heavy filters) can still hurt.

---

2. What triggers reflow?

Reflow is needed when the engine must re-derive layout for some subtree (sometimes the whole document). Common triggers:

• Changing size-affecting styles: width, height, border, fonts
• Changing content that affects line breaks or intrinsic sizing
• DOM insert/remove that shifts siblings
• Reading layout after writing styles in a bad order (forces forced synchronous layout)
• Window resize, font load swaps, initial image decode without reserved space

Many reads (offsetHeight, getBoundingClientRect()) require current layout. If you wrote styles just before, the engine may flush layout early — repeatedly doing write→read in a loop is layout thrashing.

---

3. Forced synchronous layout — the micro-pattern to avoid

Bad pattern (conceptual):

for each item:
  write style (e.g. element.style.width = ...)
  read geometry (e.g. offsetWidth)

Each read may force the engine to apply pending style changes and run layout now instead of batching.

Better pattern: batch reads, then batch writes; or use requestAnimationFrame to align work with frames.

---

4. CLS (Cumulative Layout Shift) — user-visible “jumps”

CLS measures unexpected layout movement during the page lifetime. Classic causes:

• Images/iframes without explicit dimensions (intrinsic size arrives late → content jumps)
• Ads or embeds injected above existing content
• Web fonts causing FOIT/FOUT reflow
• Dynamically inserted banners

Mitigation mindset: reserve space (width/height or aspect-ratio), skeleton placeholders, careful font loading strategies.

---

5. Paint containment (conceptual)

CSS features like contain and well-scoped stacking contexts can reduce how much must be repainted. This is optimization territory — first master avoid unnecessary layout and reserve media space.

---

6. Key takeaways

1. Reflow = layout geometry; repaint = pixels; composite = layers.
2. Interleaving DOM/style writes with layout reads causes forced synchronous layout.
3. CLS is a product of late-resolved geometry — especially media and dynamic inserts.
4. Smooth motion often targets compositor-friendly properties — but semantics and accessibility still matter (see 1.5.e).

---

Explain-It Challenge

Explain without notes:

1. Why inserting a 350×200 image without width/height (or aspect-ratio) can hurt CLS.
2. The difference between reflow and repaint with one real-world example each.
3. What “layout thrashing” means in one sentence.

---

Navigation: ← 1.5.a — Rendering pipeline · 1.5.c — Landmarks →