Webpage lagging during rendering? Try List Virtualization

@ Web Performance

Problem

Rendering is a significant performance bottleneck in web computing, especially in dashboard applications or large data lists. It skips the performance burden by “only rendering visible items.”

Solve the Problem with List Virtualization

As the user scrolls, items that are not in the viewport are gradually removed, and new items are rendered within the viewport. This can:

  • Significantly reduce the number of DOM nodes and the work needed for the initial rendering.
  • Lower memory usage and update costs (as fewer elements need to be processed with each state change).
  • Make scrolling and interaction smoother, especially when working with large data sets.

Practically, there are two ways to handle the rendered items:

  • Fixed height: Each item has the same height. This can be calculated easily using simple math (scrollTop / itemHeight).
  • Variable height: Items have different heights and require a height estimation table plus caching, which is more complex but can handle more complex scenarios.

This seemingly simple feature hides many practical details that need attention, and you can refer to these libraries:

The Magic of Native CSS content-visibility

Recently, browsers have natively supported the CSS property content-visibility (Can I use🔗), which allows the browser to “skip” the layout and paint phases of a particular element until that element becomes visible or is needed.

content-visibility does not remove the DOM node; it defers the layout and paint operations. In other words, the DOM still exists, but the browser may choose not to perform expensive actions. If the goal is truly to reduce the number of DOM nodes (to lower memory or event listener costs), virtualization is still necessary.

Summary

Before using virtualization, it is best to consider whether it is really necessary to render so many elements on the webpage.

  • Can other experiences replace (pagination, simplifying or simply remove contents)?
  • There may be negative impacts on accessibility and SEO.

It is not an essential improvement, but when problems reach a certain scale, it is necessary to seriously consider the related issues.

Further Reading