VirtualScroller 虛擬滾動組件測試

展示大量資料虛擬滾動優化

性能展示

總項目數

1,000

滾動位置

0px

項目高度

64px

調整項目數量: 1,000

10010,000

虛擬滾動列表

1

項目 1

這是第 1 個項目的描述文字,用於展示虛擬滾動的效能。

2

項目 2

這是第 2 個項目的描述文字,用於展示虛擬滾動的效能。

3

項目 3

這是第 3 個項目的描述文字,用於展示虛擬滾動的效能。

4

項目 4

這是第 4 個項目的描述文字,用於展示虛擬滾動的效能。

5

項目 5

這是第 5 個項目的描述文字,用於展示虛擬滾動的效能。

6

項目 6

這是第 6 個項目的描述文字,用於展示虛擬滾動的效能。

7

項目 7

這是第 7 個項目的描述文字,用於展示虛擬滾動的效能。

8

項目 8

這是第 8 個項目的描述文字,用於展示虛擬滾動的效能。

9

項目 9

這是第 9 個項目的描述文字,用於展示虛擬滾動的效能。

10

項目 10

這是第 10 個項目的描述文字,用於展示虛擬滾動的效能。

11

項目 11

這是第 11 個項目的描述文字,用於展示虛擬滾動的效能。

12

項目 12

這是第 12 個項目的描述文字,用於展示虛擬滾動的效能。

13

項目 13

這是第 13 個項目的描述文字,用於展示虛擬滾動的效能。

功能說明

✅ 只渲染可見區域的項目 + 預渲染緩衝區
✅ 支援大量數據 (測試可達 10,000+ 項目)
✅ 平滑滾動體驗,無卡頓
✅ 自動計算可見範圍
✅ 記憶體使用穩定

性能對比

方式	1,000 項目	10,000 項目
普通渲染	~500ms ⚠️	~5000ms ❌
虛擬滾動	~50ms ✅	~50ms ✅

VirtualScroller 虛擬滾動組件測試 | Parker 的 Next.js實驗室