All Challenges
5 PointsAdvancedFrontend Performance
00:00
High-Performance Virtualized List & Dynamic Windowing Engine
Implement a DOM-agnostic virtual list windowing algorithm computing visible indices, dynamic height caches, and overscan buffer offsets for 100,000+ items at 60 FPS.
### Problem Overview
Rendering 50,000 DOM nodes freezes the browser main thread and consumes hundreds of megabytes of RAM.
Virtual scrolling renders only the subset of items visible inside the viewport plus a safety buffer (overscan).
Implement the mathematical calculations engine behind a production virtual list supporting variable item heights.
### Functional Requirements
1. **`calculateVirtualWindow(options: VirtualWindowOptions): VirtualWindowState`**:
- Calculates `startIndex`, `endIndex`, `startOffsetTop`, and `totalContentHeight`.
2. **Dynamic Height Measurements**:
- Supports fixed item heights as well as dynamic measured item heights with an internal size cache.
3. **Binary Search Offset Finder**:
- Use Binary Search ((O(\log N))) over item offset prefix sums to find `startIndex` instantly.
4. **Overscan Buffers**:
- Adds `overscan` buffer items above and below the viewport to guarantee zero blank flicker during high-speed momentum scrolling.
### Non-Functional Requirements
- **Performance**: Computation per scroll frame must execute in (< 0.5\text{ms}) for 100,000 elements.
- **Precision**: Zero cumulative offset drift when resizing dynamic items.
AI Review Rubric Dimensions (1–10 Points):
- Binary search offset lookup
- Prefix sum indexing
- Overscan margin protection
- Dynamic height caching
solution.tsTYPESCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
36 lines•832 characters•
AI Review Ready