Learn how to reduce rendering cost by batching DOM changes and minimizing conflicting layout reads and writes.
Reading measurements and writing styles in the same loop creates avoidable cost.
If you ask for `offsetHeight` or `getBoundingClientRect()` and immediately mutate styles on every iteration, the browser may recalculate layout again and again.
That pattern becomes especially visible in long lists, repeated filters and animation-like updates.
Measure first, then apply changes.
One practical improvement is to collect layout information in one pass and apply style changes in a second pass.
That keeps reads and writes grouped, which usually reduces forced layout recalculation.
Two simple tools can make heavy DOM updates much cleaner.
`DocumentFragment` lets you prepare a structure in memory and append it in one step.
`requestAnimationFrame()` helps you coordinate visual work with the browser paint cycle when you need to react to resize or animation-like updates.