Repaints and reflows

The rendering pipeline turns DOM and CSS into pixels: style recalculation, layout (reflow), paint, and compositing. Different property changes trigger different phases.

| Change examples | Typical work | |-----------------|--------------| | `width`, `font-size`, `display` | style + layout + paint (+ composite) | | `color`, `box-shadow` | style + paint (+ composite) | | `transform`, `opacity` | style + composite (often) |

					.promoted {
  will-change: transform; /* hints only — use sparingly */
  transform: translateZ(0);
}
				

Promoting layers helps animation but increases memory. Profile in Performance and Rendering panels before micro-optimizing.

On interviews: distinguish layout, paint, and composite costs — not all animations are equally expensive.

Common pitfalls: will-change everywhere; assuming GPU layers are always faster; optimizing without profiling data.

Checklist:

• Know which phase your change triggers.
• Prefer compositor-friendly properties for motion.
• Profile before guessing bottlenecks.
• Watch memory from excessive layer promotion.