Virtual Scroll & Infinite Scroll
Two different approaches to handling large datasets efficiently
How It Works
Virtual Scroll (True Virtualization)
- Constant DOM size - Only ~20 items in DOM regardless of total dataset
- Performance - Can handle millions of items smoothly
- Fixed heights - Requires items to have consistent, known heights
- Use case - Tables, lists with uniform row heights
- DOM strategy - Items added/removed dynamically as you scroll
Infinite Scroll (Lazy Loading)
- Growing DOM - All loaded items stay in DOM
- Performance - Good for hundreds/low thousands of items
- Variable heights - Works with dynamic content heights
- Use case - Feeds, timelines with rich content
- DOM strategy - Items appended, never removed
Virtual Scroll Examples
True virtualization - constant DOM size
Timeline - 5000 Items
Visible range: 0-0 | DOM elements: 0
Table - 10000 Rows
| # | Name | Status |
|---|
Visible range: 0-0 | DOM rows: 0
Infinite Scroll Example
Lazy loading - items accumulate in DOM
Timeline Feed - Infinite Scroll
Loaded items: 0 | Total DOM elements: 0