原來虛擬列表如此簡單!萬萬沒想到
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.vue
js
``` 效果如下:
數據瞬間就渲染出來了,滾動也絲滑無比,是不是很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。這一層的元素是不可見的,目的是產生和真實列表一模一樣的滾動條。
-
可視區列表:可以看作是在最上層,展示當前處理後的數據,高度和可視區容器相同。可視區列表的位置是動態變化的,為了使其始終出現在可視區域。
理解以上概念之後,我們再看看當滾動條滾動時,我們需要做什麼:
- 根據滾動距離和
item
高度,計算出當前需要展示的列表的startIndex
- 根據
startIndex
和 可視區高度,計算出當前需要展示的列表的endIndex
- 根據
startIndex
和endIndex
截取相應的列表數據,賦值給可視區列表,並渲染在頁面上 - 根據滾動距離和
item
高度,計算出可視區列表的偏移距離startOffset
,並設置在列表上
原理就是這些,不知道大家有木有聽明白。俗話説 “書讀百遍,其義自現” ,但我更相信 “實踐出真知” ,接下來我們就自己動手實現一個虛擬列表吧!
手寫一個簡版的虛擬列表
src/components/myVirtualScroller.vue ```js
src/App.vue
js
```
效果和上面基本是一樣:
打開控制枱,可以看到頁面始終只渲染了6條左右的數據:
以上就是一個簡版的虛擬列表,如果想做的更加完善,還需要考慮緩衝區域、列表項高度自適應等,有興趣的同學可以自己研究一哈。
好了 ,今天的分享就到這裏,相信下次遇到這種場景你應該知道怎麼處理了。你的支持就是我最大的動力,如果文章對你有所幫助,不要忘了點個免費的贊呦~😋
- Vite 性能篇:掌握這些優化策略,一起縱享絲滑!
- Vite 配置篇:日常開發掌握這些配置就夠了!
- Vite 入門篇:學會它,一起提升開發幸福感!
- 還有人沒嘗過 Pinia 嗎,請收下這份食用指南!
- 10個常見的使用場景,助你從 Vue2 絲滑過渡到 Vue3 !
- 前端手寫功能第二彈,提升內力,等待下一次爆發!
- 效率提升之 —— 如何優雅的帶走上份工作的VSCode配置
- Vue組件遞歸——組件化開發的必備技能!
- 10個常用的JS工具庫,80%的項目都在用!
- 如何嚴格判斷文件上傳類型?再不會你就out啦!
- Element-UI 奇淫技巧第二彈!提升開發效率,延長摸魚時間~
- 原來虛擬列表如此簡單!萬萬沒想到
- 10個常見的前端手寫功能,你全都會嗎?
- 一款強大到沒朋友的圖片編輯插件,愛了愛了!
- 如何實現拖拽上傳、上傳進度條,以及取消上傳?
- Vue 1分鐘實現右鍵菜單,懶人的福音!
- Vue 如何快速實現頭像裁剪?方法比你想象的簡單
- 前端持久化之瀏覽器存儲技術(localStorage、sessionStorage 、session、cookies)