# 策展 · X (Twitter) 🔥

> 📖 本站完整內容索引（documentation index）：[llms.txt](/llms.txt)

> 作者：TANSTACK (@tan_stack) · 平台：X (Twitter) · 日期：2026-05-24

> 原始來源：https://x.com/tan_stack/status/2057950342005022867

## 中文摘要

TanStack Virtual 更新提升渲染效能。

Tanner Linsley 針對「TanStack Virtual」進行了為期三天的端到端稽核，這是該程式庫近年來最大規模的效能釋出。此次更新不僅修復了多項導致效能瓶頸的程式碼錯誤，更透過內部架構重寫與 iOS 專屬處理路徑，顯著改善了大型列表的渲染表現與捲動體驗。

**效能優化與架構重寫**
本次更新解決了多個導致效能低落的關鍵問題，其中最顯著的是修正了 `resizeItem` 函式中不必要的 `Map` 複製操作，將 1 萬個項目的調整效能從近 2 秒提升至 1.3 毫秒，效能增幅達 1382 倍。此外，針對大規模列表的記憶體分配問題，開發團隊引入了延遲載入機制：
- 針對單軌列表，改用 `Float64Array` 儲存起始位置與尺寸，僅在讀取時透過 Proxy 動態產生 `VirtualItem` 物件。
- 此舉大幅降低了物件分配開銷，在 500k 項目的測試中，冷啟動渲染時間從 14 毫秒大幅縮減至 2.7 毫秒。
- 保持完全向後相容，確保現有 API 介面與內部消費邏輯無需修改即可運作。

**iOS 捲動體驗與行為修正**
針對 iOS Safari 在動態高度列表中的捲動問題，開發團隊實作了專屬的處理邏輯：
- 偵測到使用者觸控捲動時，會暫緩 `scrollTop` 的寫入，避免中斷 iOS 原生的慣性捲動效果。
- 待捲動行為穩定後，再將累積的調整一次性寫入，解決了過去 iOS 上捲動常出現的卡頓與跳動問題。
- 針對長期存在的「向上捲動時項目跳動」問題，現在預設僅在向下捲動時調整位置，徹底解決了動態高度列表在反向捲動時的視覺異常。

**新功能與基準測試**
- **快照功能**：新增 `virtualizer.takeSnapshot()` 方法，可將目前測量的項目匯出為物件，配合 `scrollOffset` 即可實現精確的頁面導航捲動位置還原。
- **跨庫基準測試**：為了確保效能改進並提供客觀數據，開發團隊在專案中新增了一套跨程式庫的基準測試套件。使用者可透過以下指令在本地執行驗證：
```bash
cd benchmarks && pnpm bench
```

**未來規劃**
儘管此次更新已大幅提升效能，Tanner Linsley 表示未來將持續關注「反向無限捲動」（適用於聊天介面）以及針對百萬級項目列表的「Fenwick 樹」記憶體結構優化，這些功能將在後續版本中進行獨立設計與發布。詳細更新資訊可參考 [TanStack 官方部落格](https://tanstack.com/blog/tanstack-virtual-perf-and-ios)。

## 標籤

框架更新, 功能更新, iOS, Web, TanStack