Table - Performance Benchmark

Performance benchmark for YH-UI Table virtual scrolling under large data scenarios. Use the interactive panel below to measure FPS, initial render time, scroll latency, and visible DOM node count in real time.

Interactive Benchmark Panel

Adjust parameters and click Run Benchmark to measure rendering performance metrics in real time.

Row Count

10,000 rows

Row Height (px)

48px

Buffer Rows

5

⚡

Click "Run Benchmark" to simulate 30 scroll events and collect FPS, latency, and DOM metrics.

ID	Name	Age	Dept	Salary	City	Email	Status

Click "Run Benchmark" to load data

10K-Row Virtual Scroll Performance Benchmark

Metric Reference

Metric	Description	Target
Initial Render	Time from data load to first paint	≤ 200ms is Excellent
Scroll Avg	Average time per scroll event to next frame	≤ 10ms is Excellent
FPS	Frames per second during benchmark	≥ 55fps is Excellent
Visible DOM Rows	Number of <tr> elements actually in DOM (proves virtual rendering)	~viewport rows

Optimization Tips

1. Set an accurate rowHeight — virtual scroll calculates positions based on it; incorrect values cause scroll jumping.
2. Keep buffer at 5 — larger values add smoothness but increase render cost.
3. Always set row-key — unique keys let Vue's diff algorithm reuse DOM nodes efficiently.
4. Avoid creating new objects in render — use stable references to prevent needless re-renders.
5. Combine with pagination for 500K+ rows — server-side paging + virtual scroll is the optimal pattern for extreme datasets.