原来虚拟列表如此简单!万万没想到

语言: 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

以上就是一个简版的虚拟列表,如果想做的更加完善,还需要考虑缓冲区域、列表项高度自适应等,有兴趣的同学可以自己研究一哈。

好了 ,今天的分享就到这里,相信下次遇到这种场景你应该知道怎么处理了。你的支持就是我最大的动力,如果文章对你有所帮助,不要忘了点个免费的赞呦~😋