Chapter 59: Lazy Loading & Resource Scheduling

Virtual Lists & 60 FPS Infinite Scrolling

**Part 12: Performance & Optimization** — Chapter 59: Lazy Loading & Code Splitting

LEARNING OBJECTIVES ⌵
  • Understand DOM node limits (Lighthouse penalties when DOM exceeds 800–1400 nodes).
  • Implement DOM element recycling / windowing for lists with 100,000+ items.
  • Calculate scrollTop, item height offsets, and buffer padding.
  • Preserve keyboard focus and screen reader accessibility (aria-rowcount, aria-rowindex).
🎬 INTERACTIVE VISUAL PIPELINE Core Architecture Simulation
🌐
1. Input
Directives & Tags
⚙️
2. Parse
Tokenizer & AST
🌳
3. Layout
Box Model & Flow
🎨
4. Render
GPU Paint & Composite
PHASE 1: INPUT & DIRECTIVES
Browser receives declarative markup stream, parsing tag tokens and initializing component state.

📖 The Virtualization Window

Total Dataset: 100,000 items (Requires 500MB RAM if fully rendered into DOM! ❌)

Virtual Scroll Window (Only 15 DOM nodes rendered! ✅):
[ Top Spacer: height = startIndex * itemHeight ]
+------------------------------------+
|  Rendered Item 104                 |
|  Rendered Item 105 (Viewport Top)  |
|  Rendered Item 106                 |
|  Rendered Item 107 (Viewport Bottom)|
|  Rendered Item 108                 |
+------------------------------------+
[ Bottom Spacer: height = (total - endIndex) * itemHeight ]

📌 Key Takeaways

  • Virtualization keeps the DOM footprint constant ($O(1)$) regardless of whether the dataset contains 100 or 1,000,000 items.
  • Always include phantom spacer heights above and below the visible window to ensure the native scrollbar behaves accurately.
  • --

❓ Knowledge Check

1. Which of the following is correct?

2. Which of the following is correct?