vue-virtual-scroll-list虚拟组件实现思路详解
作者:砂糖橘加盐
这篇文章主要给大家介绍了关于vue-virtual-scroll-list虚拟组件实现思路的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
组件性能问题
在数据量大的时候,cascader/tree这类的列表加载缓慢,滚动卡顿,操作延迟。
下图是2000条数据的时候:
密密麻麻的节点:
绚丽多芬的火焰图:
从上面的火焰图可知卡顿的click时间,渲染时间的非常的严重。
影响cascader/tree这类组件性能的主要原因:
- 一次性加载出所有的dom节点,导致首次加载缓慢
- 组件中有一个computed属性:
checkedValue
。这个变量触发任何一个click事件的时候,都会改变这个变量。cascader源码当中,会因为这个值的改变触发render
方法,导致JS执行时间、重绘和重排的时间都很长。
解决方案
既然是大数据量导致的,那么我们就控制一次性加载的数据,这个时候自然想到使用虚拟滚动。github搜索下,搜索到了vue-virtual-scroll-list
组件。
npm install vue-virtual-scroll-list --save
具体用法可以自行查看官网。主要是下面三个参数:
- data-key: 配置循环的组件子组件的唯一ID
- data-source: 数组
- data-component: 待循环的组件
个人更加喜欢像下面这样的组件设计:
<el-select v-model="value" placeholder="Select"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled" /> </el-select>
显性的子组件和v-for
,以及直观的key
值。
优化后的表现
结果显而易见。火焰图不够红火了!不再卡顿。
实现原理
那么它的实现原理是什么呢?
下面是一张3d图,表示了数据实际展示的范围。
由此可知,根据滚动容器元素的可视窗口来渲染长列表中的部分数据。利用视差和错觉制作一份出一份“虚拟”列表,一个虚拟列表由三部分组成:
- 视窗口
- 虚拟数据列表(数据展示)
- 滚动占位区块(底部滚动区
它的实现思路:
根据该图可以得到下面这样的思维导图:
总结
到此这篇关于vue-virtual-scroll-list虚拟组件实现思路的文章就介绍到这了,更多相关vue-virtual-scroll-list虚拟组件实现内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!