听说你还不会虚拟列表？原谅我来晚了

什么是虚拟列表

虚拟列表是指对列表的 可视区域 进行渲染，对 非可见区域 不渲染或部分渲染，从而极大提高渲染性能的一种技术。

为什么要用虚拟列表

有时我们会遇到一些业务场景，要展示的列表很长，且不能使用分页的方式，如果一次性把数据全部渲染到页面，浏览器将变得非常卡顿，因为渲染 dom 需要耗费大量时间。虚拟列表 就是对长列表的一种优化方式，通过只渲染可视区域数据，大大提高渲染性能。

如何使用虚拟列表

目前虚拟列表已经有很多知名的库，如 vue-virtual-scroller、vue-virtual-scroll-list、react-virtualized 等， 下面就给大家介绍一下 vue-virtual-scroller 这个优秀库的使用方法，然后再带大家实现一个简版的虚拟列表。准备好了吗，开干！

安装

npm install --save vue-virtual-scroller

RecycleScroller组件

适用于列表每一项高度确定的情况，高度可设置成相同，也可单独配置每一项高度。

src/components/virtualRecycleScroller.vue

src/App.vue

效果如下：

一万条数据的列表瞬间就渲染出来了，滚动也丝滑无比，是不是很nice!

DynamicScroller组件

适用于列表每一项高度不确定的情况。

src/components/virtualDynamicScroller.vue

src/App.vue

效果如下：

可以看到列表项的高度是随内容的变化而变化，依旧是丝滑无比！

虚拟列表原理

初次听到 “虚拟列表” 这个名词感觉非常的高大上，其实弄清楚它的原理之后，你会发现它非常的简单。话不多说，先上图：

• 可视区容器：可以看作是在最底层，容纳所有元素的一个盒子。
• 可滚动区域：可以看作是中间层，假设有 10000 条数据，每个列表项的高度是 50，那么可滚动的区域的高度就是 10000 * 50。这一层的元素是不可见的，目的是产生和真实列表一模一样的滚动条。
• 可视区列表：可以看作是在最上层，展示当前处理后的数据，高度和可视区容器相同。可视区列表的位置是动态变化的，为了使其始终出现在可视区域。

理解以上概念之后，我们再看看当滚动条滚动时，我们需要做什么：

1. 根据滚动距离和 item 高度，计算出当前需要展示的列表的 startIndex
2. 根据 startIndex 和 可视区高度，计算出当前需要展示的列表的 endIndex
3. 根据 startIndex 和 endIndex 截取相应的列表数据，赋值给可视区列表，并渲染在页面上
4. 根据滚动距离和 item 高度，计算出可视区列表的偏移距离 startOffset，并设置在列表上
   
   原理就是这些，不知道大家有木有听明白。俗话说 “书读百遍，其义自现” ，但我更相信 “实践出真知” ，接下来我们就自己动手实现一个虚拟列表吧！

手写一个简版的虚拟列表

src/components/myVirtualScroller.vue

src/App.vue

效果和上面基本是一样：

打开控制台，可以看到页面始终只渲染了6条左右的数据：

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

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