Back to all skills
Progress17 of 47
JavaScriptMedium

Batch DOM CSS Changes

Avoid interleaving style writes with layout reads. When you read a layout property (like `offsetWidth`, `getBoundingClientRect()`, or `getComputedStyle()`) between style changes, the browser is forced to trigger a synchronous reflow.

javascriptdomcssperformancereflow

Code Comparison

Incorrect (interleaved reads and writes force reflows):typescript
Correct (batch writes, then read once):typescript
Better: use CSS classescss

Why This Matters

Impact: reduces reflows/repaints. This optimization is classified as MEDIUM priority for production applications.