Paint

Paint turns layout boxes and visual styles into pixels. Color changes, shadows, filters, clipping, and large backgrounds can invalidate painted areas. Optimizing paint means reducing the changed area, simplifying expensive effects where they matter, and using DevTools to verify whether paint is actually the bottleneck.

					.card {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); /* can expand paint invalidation */
}
				

Paint flashing in DevTools reveals unexpected full-layer repaints. Promoting layers to skip paint trades memory and upload cost.

On interviews: separate layout, paint, and composite instead of treating all visual updates as the same cost.

Common pitfalls: promoting layers to avoid paint can increase memory and still cause expensive rasterization.

The trade-off is convenience versus control — pick the mechanism that matches your coupling and performance budget.

Checklist:

• Find paint invalidations with tooling.
• Reduce painted area and effect complexity.
• Do not animate expensive paint-only properties blindly.
• Verify the bottleneck before optimizing.