Windowing — 10,000 rows, 12 DOM nodes — Visualize

Windowing — 10,000 rows, 12 DOM nodes

A node counter proves the whole technique: render only what the eye can see, and slide the window as the user scrolls.

💡

THE BIG IDEA

A list of 10,000 jobs is cheap as data and ruinous as DOM — the browser lays out and paints every node you create, visible or not. Windowing (virtualization) is the performance playbook’s bluntest trick: compute which ~12 rows are on screen, render exactly those, and slide the window on scroll. We run both versions with a counter and watch 10,000 become 12.

Move your mouse over any line to see what it does. Hover a loop line and it plays through every repeat. Or press ▶ Play to watch the whole thing. On a phone, tap the arrows.

1const rows = Array.from({ length: 10000 }, (_, i) => "job #" + i);
2let domNodes = 0;
3const renderRow = (r) => { domNodes++; return r; };
4rows.forEach(renderRow);
5console.log("naive: DOM nodes created =", domNodes);
6domNodes = 0;
7function windowRender(scrollTop) {
8  const first = Math.floor(scrollTop / 30);
9  return rows.slice(first, first + 12).map(renderRow);
10}
11const frame1 = windowRender(0);
12console.log("windowed:", domNodes, "nodes |", frame1[0], "…", frame1[11]);
13const frame2 = windowRender(3000);
14console.log("scrolled:", frame2[0], "…", frame2[11], "| still 12 rows a frame");

●

Your jobs page lists 10,000 openings. It loads… eventually. Scrolling stutters. The data fetch took 200ms — so what is the browser choking on?

Not the data — the DOM. Every rendered row is layout, style and paint work, and 10,000 of anything is too many. The fix is almost cheeky: only render what the eye can see. A node counter will prove both halves.

📦 Memory boxes

what the program is remembering right now

nothing remembered yet

🖥️ What the computer shows

the answers the program prints out

nothing yet ▌

1/10

useMemo — the answer shelf (a work counter proves it)