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

語言: CN / TW / HK

theme: cyanosis highlight: atom-one-dark


什麼是虛擬列表

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

為什麼要用虛擬列表

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

如何使用虛擬列表

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

安裝

js npm install --save vue-virtual-scroller

RecycleScroller元件

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

src/components/virtualRecycleScroller.vue

```js

src/App.vuejs

``` 效果如下:

20211121_222152 00_00_00-00_00_30.gif

資料瞬間就渲染出來了,滾動也絲滑無比,是不是很nice!

DynamicScroller元件

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

src/components/virtualDynamicScroller.vue ```js

```

src/App.vue ```js

``` 效果如下:

20211121_223340 00_00_01-00_00_06 00_00_00-00_00_30.gif

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

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

虛擬列表原理

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

image.png

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

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

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

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

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

xnlb2.jpg

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

手寫一個簡版的虛擬列表

src/components/myVirtualScroller.vue ```js

src/App.vuejs

``` 效果和上面基本是一樣: 20211128_152838 00_00_00-00_00_30.gif

開啟控制檯,可以看到頁面始終只渲染了6條左右的資料:

20211129_212347 00_00_00-00_00_30.gif

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

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