摘要

虛擬滾動是一種高效能渲染技術，用於在需要顯示海量資料的長列表時，只渲染當前可視範圍內的列表項目，從而避免一次性渲染數千個 DOM 元素造成的效能瓶頸。

定義與說明

虛擬滾動的原理是：維護一個只包含少量 DOM 元素的「視窗」，當使用者滾動時，動態地計算並更新這個視窗中應該顯示的資料和位置，給使用者一種正在滾動一個完整列表的錯覺。這通常需要藉助第三方函式庫，如 vue-virtual-scroller。

實作範例

使用 vue-virtual-scroller 的概念性範例。

虛擬滾動組件使用

<template>
  <!-- RecycleScroller 只會渲染可見的項目 -->
  <RecycleScroller
    class="scroller"
    :items="list"
    :item-size="32"
    v-slot="{ item }"
  >
    <div class="user">{{ item.name }}</div>
  </RecycleScroller>
</template>

結論

當你需要渲染包含數百、數千甚至更多項目的列表時，虛擬滾動是解決效能問題的終極方案。它以極低的 DOM 成本，實現了無限滾動的可能。

虛擬滾動效能優化大量資料