Offscreen DOM nodes cost memory, layout, paint, and (in React) reconciliation — for content nobody is looking at. The goal: the DOM size tracks what's visible, not what exists in your data.

1. Virtualize long lists

For thousands of rows, render only the visible window plus a small overscan buffer, absolutely positioned inside a spacer element that has the full scroll height.

• Libraries: react-window, react-virtual/@tanstack/react-virtual, virtua.
• Fixed-height rows are trivial; dynamic heights need measurement + a position cache.
• Keeps DOM at ~20–50 nodes regardless of dataset size.

2. content-visibility: auto

.section { content-visibility: auto; contain-intrinsic-size: 0 500px; }

The browser skips layout and paint for offscreen sections until they scroll near the viewport. contain-intrinsic-size provides a placeholder size so the scrollbar stays sane. Almost free, no JS.

3. Lazy-mount below-the-fold regions

Use an IntersectionObserver to mount heavy sections (comments, related items, maps, charts) only when they approach the viewport. In React, conditionally render once the sentinel intersects.

4. Defer offscreen media

• <img loading="lazy"> and <iframe loading="lazy">.
• IntersectionObserver for anything custom (videos, canvas, third-party widgets).

5. Unmount, don't just hide

display: none keeps the node, its memory, and its event listeners. For truly far-away content, remove it from the tree and re-add on demand.

How to decide

• Profile first: Lighthouse flags "Avoid an excessive DOM size" (>~1500 nodes, depth >32).
• Long homogeneous lists → virtualization.
• Long heterogeneous page → content-visibility + lazy-mount sections.
• Always measure DOM node count before/after.