原來虛擬列表如此簡單！萬萬沒想到

---

theme: cyanosis highlight: atom-one-dark

---

什麼是虛擬列表

虛擬列表是指對列表的 可視區域 進行渲染，對 非可見區域 不渲染或部分渲染，從而極大提高渲染性能的一種技術。

為什麼要用虛擬列表

有時我們會遇到一些業務場景，要展示的列表很長，且不能使用分頁的方式，如果一次性把數據全部渲染到瀏覽器，頁面將變得非常卡頓，因為渲染 dom 需要耗費大量時間，無法響應其他操作。虛擬列表 就是對長列表的一種優化方式，通過只渲染可視區域數據，大大提高渲染性能。

如何使用虛擬列表

目前虛擬列表已經有很多知名的庫，如 vue-virtual-scroller、vue-virtual-scroll-list、react-virtualized 等，vue-virtual-scroller 目前在 github 是 6.3k star，下面給大家介紹一下這個優秀庫的使用方法，然後再帶大家實現一個自己的虛擬列表。準備好了嗎，開幹！

安裝

js npm install --save vue-virtual-scroller

RecycleScroller組件

適用於列表每一項高度確定的情況，高度可設置成相同，也可單獨配置每一項高度。

src/components/virtualRecycleScroller.vue

```js

src/App.vuejs

``` 效果如下：

數據瞬間就渲染出來了，滾動也絲滑無比，是不是很nice!

DynamicScroller組件

適用於列表每一項高度不確定的情況。

src/components/virtualDynamicScroller.vue ```js

```

src/App.vue ```js

``` 效果如下：

可以看到列表項的高度是隨內容的變化而變化，依舊是絲滑無比！

以上就是 vue-virtual-scroller 的基本使用方法，還有很多配置等待大家去探索，我就不一一贅述了。github地址：http://github.com/Akryum/vue-virtual-scroller

虛擬列表原理

初次聽到 “虛擬列表” 這個名詞感覺非常的高大上，其實弄清楚它的原理之後，你會發現它非常的簡單。話不多説，先上圖：

• 可視區容器：可以看作是在最底層，容納所有元素的一個盒子。

• 可滾動區域：可以看作是中間層，假設有 10000 條數據，每個列表項的高度是 50，那麼可滾動的區域的高度就是 10000 * 50。這一層的元素是不可見的，目的是產生和真實列表一模一樣的滾動條。

• 可視區列表：可以看作是在最上層，展示當前處理後的數據，高度和可視區容器相同。可視區列表的位置是動態變化的，為了使其始終出現在可視區域。

理解以上概念之後，我們再看看當滾動條滾動時，我們需要做什麼：

1. 根據滾動距離和 item 高度，計算出當前需要展示的列表的 startIndex
2. 根據 startIndex 和 可視區高度，計算出當前需要展示的列表的 endIndex
3. 根據 startIndex 和 endIndex 截取相應的列表數據，賦值給可視區列表，並渲染在頁面上
4. 根據滾動距離和 item 高度，計算出可視區列表的偏移距離 startOffset，並設置在列表上

原理就是這些，不知道大家有木有聽明白。俗話説 “書讀百遍，其義自現” ，但我更相信 “實踐出真知” ，接下來我們就自己動手實現一個虛擬列表吧！

手寫一個簡版的虛擬列表

src/components/myVirtualScroller.vue ```js

src/App.vuejs

``` 效果和上面基本是一樣：

打開控制枱，可以看到頁面始終只渲染了6條左右的數據：

以上就是一個簡版的虛擬列表，如果想做的更加完善，還需要考慮緩衝區域、列表項高度自適應等，有興趣的同學可以自己研究一哈。

好了 ，今天的分享就到這裏，相信下次遇到這種場景你應該知道怎麼處理了。你的支持就是我最大的動力，如果文章對你有所幫助，不要忘了點個免費的贊呦~😋