Virtualization Benchmark
Render 1,000 to 50,000 rows with and without windowing, and compare initial render time and interaction responsiveness.
Intermediate~12 min
What you'll learn
- Measure how render cost scales with node count
- Understand what windowing does and does not solve
Interactive laboratory
Controls
generate, then run a mode5,000 rows
normal
Generate a dataset first. Run each mode to compare.
List container
not mountedNothing mounted yet.
Row height 32px · viewport 320px · overscan 6 rows
- Dataset size
- 0
- Rendered DOM rows
- 0
- Generation duration
- -
- Scroll height
- auto
| Mode | Rows in data | DOM rows | Observed setup/render duration |
|---|---|---|---|
| normal | - | - | not run |
| virtualized | - | - | not run |
Durations are wall-clock time from the click to the frame after commit, measured with performance.now(). They include React work, layout and paint - not isolated React render time. Values differ per machine and browser.
What happened?
Generate a dataset and run both modes to compare.
Why it happened
Large lists degrade in a predictable way: more nodes means more layout, paint and memory.
Windowing keeps the node count constant regardless of dataset size.
Key takeaways
- Cost tracks DOM nodes, not data length
- Virtualization trades scroll complexity for a flat render budget
Tags
- virtualization
- lists
- benchmark
- rendering