CSS for Performance – Avoiding Layout Thrash

Layout thrashing occurs when JavaScript reads layout properties (offsetWidth) then writes styles that cause a reflow.

• Prefer transform and opacity for animations (GPU‑accelerated).
• Batch DOM reads/writes using requestAnimationFrame.
• Use contain to limit reflow scope.

---

Example: Containment

.widget { contain:layout style; }