vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue-virtual-scroll-list虚拟组件实现

vue-virtual-scroll-list虚拟组件实现思路详解

作者:砂糖橘加盐

这篇文章主要给大家介绍了关于vue-virtual-scroll-list虚拟组件实现思路的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

组件性能问题

在数据量大的时候,cascader/tree这类的列表加载缓慢,滚动卡顿,操作延迟。

下图是2000条数据的时候:

密密麻麻的节点:

绚丽多芬的火焰图:

从上面的火焰图可知卡顿的click时间,渲染时间的非常的严重。

影响cascader/tree这类组件性能的主要原因:

解决方案

既然是大数据量导致的,那么我们就控制一次性加载的数据,这个时候自然想到使用虚拟滚动。github搜索下,搜索到了vue-virtual-scroll-list组件。

npm install vue-virtual-scroll-list --save

具体用法可以自行查看官网。主要是下面三个参数:

个人更加喜欢像下面这样的组件设计:

<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虚拟组件实现内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文