Frontend Fundamentals | Part 1: DOM Virtualization & Rendering 100K Rows at 60 FPS

The Challenge: Rendering 100,000 Rows

Imagine you are tasked with displaying a financial transactions table containing 100,000 rows.

The naive approach is simply mapping over all 100,000 items in JSX:

• The browser must create 100,000 DOM nodes.
• Memory consumption surges to hundreds of megabytes.
• Layout and paint recalculations freeze the main thread, dropping framerates to zero.

The Engineering Solution: Virtualization (Windowing)

At any given second, how many rows can a human eye actually see on a laptop screen? Maybe 15 to 25 rows.

Why keep 99,975 invisible DOM nodes alive in memory?

Virtualization operates on a simple, brilliant premise:

1. 1Measure the container viewport height and scroll offset.
2. 2Render only the visible slice of items (e.g. rows 45 to 65).
3. 3Use transparent spacer padding to preserve accurate scrollbar height and momentum.

By rendering only 20 DOM nodes at any time, your table effortlessly scrolls at a locked 60 FPS, whether it contains 100 rows or 10,000,000 rows.