Go back
2 min read

Making long lists fast: Content Visibility versus Virtualization 📜⚡️

Content Visibility and virtualization address different bottlenecks: choosing based on Layout, Paint, DOM size and memory.

Making long lists fast: Content Visibility versus Virtualization 📜⚡️

When a list with hundreds or thousands of items starts lagging during scrolling or takes too long to load, developers usually rush to implement one of two standard solutions: content-visibility: auto in CSS, or a virtualization library (such as TanStack Virtual).

Agustín Barrientos has published an excellent article highlighting the main mistake: these approaches solve completely different bottlenecks.

Content Visibility Auto

The browser keeps all DOM nodes in the document tree, but completely skips Layout, Style Calculation and Paint for blocks outside the visible area (offscreen).

  • Pros: Works natively with 1 line of CSS, doesn’t break find-in-page, and preserves accessibility, Tab-key focus, direct links to elements and DOM nodes’ internal state.
  • Main downside: Memory use and the DOM tree still grow.

Virtualization

The JS code doesn’t create or mount offscreen rows at all, pulling them out of the DOM and keeping only the 10–20 items that currently fit on screen.

  • Pros: The only lifeline when you have 10,000+ items. The DOM tree stays lightweight and memory consumption stays minimal.
  • Main downside: As soon as you choose virtualization, absolutely every “free” browser feature (find-in-page, Tab navigation, a11y, deep links) becomes your own code that you have to design, implement and test by hand.

🛠 How do you choose the right approach?

Barrientos suggests basing the decision strictly on profiling:

  1. Record a Flamechart/Performance profile in DevTools on the problematic page.

  2. Check where the lion’s share of the time is going:

    • Is the time spent on Layout/Paint? Your problem is heavy layout. Apply content-visibility: auto + contain-intrinsic-size, and in 90% of cases, for lists of a few hundred items, that will be more than enough.
    • Is the time spent on DOM size? You have tens of thousands of items. content-visibility won’t save you here. You’ll need to implement actual virtualization.

Read the article with interactive benchmarks

Which approach do you usually take by default? Do you use native content-visibility for a quick boost, or immediately bring in virtualizers? 👇

Copied