Implementing Virtualization for Web Applications

During one of my recent technical interviews, I came across a question to create an Excel sheet, which started off as a barebones implementation but then led to a very deep dive into ways to optimize the performance of the web app. One of the techniques we discussed was virtualization.

So, how would you implement virtualization? The obvious answer might be using an open source library like react-virtual or react-virtuoso, right? But before using these libraries, shouldn't you know how to create one yourself, at least the very basics of it? Well, let's take a deep dive.

Virtualization is a technique that improves performance when dealing with large datasets by rendering only the elements currently visible on the screen. Instead of loading all items at once, it dynamically manages content based on the user's scroll position. This method, also called windowing, keeps the number of active DOM elements low, reducing memory usage and improving responsiveness.

When dealing with thousands of rows or items, rendering them all at once can slow down your application. Virtualization helps by only keeping a small number of elements in the DOM at a time. This leads to:

1. 1. Faster load times
2. 2. Smoother scrolling
3. 3. Better INP and LCP scores.

Imagine a scenario where your screen can display 10 list items at a time, but the dataset contains thousands of entries. Instead of rendering all of them, we display only a bit more than what’s visible—let’s say 20 items. This extra space, known as an overscan buffer, ensures smooth scrolling.

We place one Intersection Observer before the first item and another after the 10th item (just before the 11th). These observers detect when the user scrolls and trigger updates to load new data.

Each list item is absolutely positioned rather than using traditional flow layout (like margins and padding). This prevents layout shifts and costly browser reflows, making scrolling more efficient.

As the user scrolls down and reaches item 11-20, the first 10 items move into the buffer zone. When the bottom observer gets triggered, we shift these first 10 items to represent items 21-30 instead of removing and creating new elements.

To maintain the illusion of a full list, we place an empty placeholder div equal in height to the previous items. This ensures the scrollbar remains accurate and prevents jumps.

Instead of managing thousands of DOM elements, we maintain only 20 at any given time, dynamically updating them as needed. This approach keeps the UI fast, responsive, and highly optimized for performance.

While libraries like react-virtual or react-virtuoso handle much of this for you, understanding these core concepts helps when fine-tuning performance or building custom solutions.