优化无限列表性能vue-virtual-scroll-list 插件

优化背景:如果你的应用存在非常长的或者无限滚动的列表,那么需要采用窗口化的技术来优化性能,只需要渲染少部分的内容(可视区域),减少重新渲染组件和创建dom节点的时间,可以参考以下的开源项目vue-vitual-scoll -list 和vue-virtual-scroller ,来优化这种无限列表的场景;

参考文档:https://www.npmjs.com/package/vue-virtual-scroll-list

image

1.安装 cnpm/npm install vue-virtual-scroll-list --save

2.引入下载好的组件,并注册组件 import virtualList from 'vue-virtual-scroll-list'

3.注意版本1.x和2.x使用方式不同、api也不同

使用方式:







image

效果图:

image

vue-virtual-scroller插件请参考:https://www.npmjs.com/package/vue-virtual-scroller

你可能感兴趣的:(优化无限列表性能vue-virtual-scroll-list 插件)