js-performance-patterns

Cache array length and nested property access outside the loop, and combine chained filter/map/reduce calls into a single pass to avoid intermediate arrays. These changes matter for arrays with 10,000+ items or code running at 60fps.

Batch all DOM reads first, then perform all writes, so the browser recalculates layout once instead of per element. For complex cases, defer writes with requestAnimationFrame or use a library like fastdom.

Use Set or Map when performing repeated lookups against the same collection, since .has() and .get() are O(1) versus O(n) for .includes() or .find(). Map also outperforms plain objects when keys are added and removed dynamically.

Yes, wrapping visual updates in requestAnimationFrame syncs them with the browser's render cycle and prevents jank. Combine it with a ticking flag so updates run at most once per frame, and keep the scroll listener passive.

Avoid them in cold code paths where readability matters more than nanosecond gains. Fix algorithmic complexity first, such as reducing O(n^2) to O(n), and apply micro-patterns only after profiling identifies a genuine hot path.