List Virtualization
清單虛擬化（虛擬捲動）
01你是不是遇到這個 / THE SYMPTOM
我的清單有上千、上萬筆資料，一次全部渲染出來頁面就超卡、捲動一頓一頓、甚至瀏覽器快掛掉。我想要只畫出「目前螢幕看得到的那幾筆」，捲到哪畫到哪，但捲軸看起來還是完整長度。
↑ 如果你點頭了，你要的關鍵字就是 List Virtualization。
02這是什麼 / DEFINITION
一種大型清單的渲染最佳化：只實際渲染目前在可視範圍內的少數項目，捲動時動態替換，讓 DOM 節點數維持很少，捲軸仍呈現完整資料量。
03什麼時候用 / WHEN TO USE
長清單、大型表格、聊天訊息紀錄、無限捲動 Feed——資料筆數成百上千、一次全渲染會嚴重拖慢頁面時。
04怎麼跟 AI 說 / HOW TO ASK
直接複製這句、貼進 Claude Code / Cursor / Copilot / ChatGPT：
我的清單有上萬筆造成卡頓，幫我改用 list virtualization（虛擬捲動），只渲染可視範圍內的項目，可以用 react-window 或 TanStack Virtual 之類的方案。
05常見坑 / WATCH OUT
⚠ 項目高度不固定時會比較難處理（要量測或估算高度）。另外虛擬化後 Ctrl+F 瀏覽器內建搜尋找不到沒被渲染的項目，要自己做搜尋。資料只有幾十筆就別硬上，反而增加複雜度。
06相關的詞 / RELATED