Describe the browser rendering process. What is the difference between reflow and repaint?

Browser rendering pipeline

From HTML / CSS / JS to pixels on screen, the browser follows these steps:

HTML → DOM tree
CSS  → CSSOM tree
          ↓
       Render Tree  (merge visible nodes)
          ↓
       Layout (Reflow) — calculate geometry of every element
          ↓
       Paint (Repaint) — draw elements to layers
          ↓
       Composite — merge layers, send to GPU

Step-by-step

1. HTML parsing → DOM: incrementally parse HTML tags and build the DOM node tree.
2. CSS parsing → CSSOM: parse all CSS (external, embedded, inline) and build the CSSOM tree.
3. Render Tree: merge DOM + CSSOM; contains only visible nodes (display: none elements are excluded).
4. Layout (Reflow): calculate the exact position and size (in pixels) of each node.
5. Paint (Repaint): draw the nodes — text, colours, borders, shadows — onto layers.
6. Composite: merge all layers into the final frame and hand it to the GPU.

Reflow

Definition: triggered when an element's geometric properties (width, height, position, margin) change. The browser must redo the Layout calculation and then repaint.

What triggers reflow

• Adding or removing DOM nodes
• Changing width, height, padding, margin, border, position
• Reading forced-synchronous layout properties: offsetWidth, clientTop, getBoundingClientRect(), getComputedStyle()
• Window resize, web font load completion

Cost

Very high — a single change can cascade and reflow the entire page.

Repaint

Definition: triggered when an element's visual properties (colour, background, visibility) change without affecting geometry. Only Paint needs to run — no new Layout.

What triggers repaint only

• color, background-color, visibility, outline, some box-shadow changes

Cost

Medium — cheaper than reflow, but still carries overhead.

Relationship between the two

Reflow always implies repaint. Repaint does not necessarily imply reflow.

Composite only (best case)

Some properties skip Layout and Paint entirely and go straight to Composite:

• transform
• opacity
• filter (in most cases)

The GPU handles these during compositing — the best choice for animations.

Optimisation tips

Strategy	Details
Animate with transform / opacity	Composite only — no Layout or Paint
Batch style changes	Switch a class once instead of setting multiple inline styles
Avoid forced synchronous layout	Read first, then write; never interleave in a loop
Virtual DOM	React / Vue diff and batch DOM mutations
will-change: transform	Promote to composite layer (use sparingly)

Summary

Type	Trigger	Cost	Pipeline steps
Reflow	Geometric change	Highest	Layout → Paint → Composite
Repaint	Visual change	Medium	Paint → Composite
Composite	transform / opacity	Lowest	Composite