Vue.js 无限滚动列表性能优化方案

2023-08-05 02:53:04 55

问题

大家都知道，Web页面修改DOM是开销较大的操作，相比其他操作要慢很多。这是为什么呢？因为每次DOM修改，浏览器往往需要重新计算元素布局，再重新渲染。也就是所谓的重排（reflow）和重绘（repaint）。尤其是在页面包含大量元素和复杂布局的情况下，性能会受到影响。那对用户有什么实际的影响呢？

一个常见的场景是大数据量的列表渲染。通常表现为可无限滚动的无序列表或者表格，当数据很多时，页面会出现明显的滚动卡顿，严重影响了用户体验。怎么解决呢？

解决方案

既然问题的根源是DOM元素太多，那就想办法限制元素数量。

限制列表对用户可见的元素数量。我们把可见区域称为ViewPort
当列表滚动时，列表种的其他元素怎么由不可见变为可见？
监听列表容器元素的滚动事件，当列表里的元素进入可视区域，则添加到DOM中
问题是如果一直这么滚下去，列表会越来越大。所以需要在列表元素离开ViewPort的时候从DOM中移除
问题又来了，由于ViewPort刚好是一屏的大小，滚动的时候元素还没来得及渲染，会出现一段时间的空白。解决办法就是上下增加一部分数据渲染。

无限滚动的性能优化方案基本思路就是这样。

在实际项目中，我们可能不需要自己从头实现一个无限滚动列表组件，Vue.js就有一个现成的轮子：vue-virtual-scroller。

在项目中安装这个插件：

$npminstall-Dvue-virtual-scroller

项目入口文件main.js引入这个插件：

import"vue-virtual-scroller/dist/vue-virtual-scroller.css";
importVuefrom"vue";
importVueVirtualScrollerfrom"vue-virtual-scroller";

Vue.use(VueVirtualScroller);

案例一：VirtualList

我们来看一个简单的例子，用vue-virtual-scroller渲染一个包含大量数据的列表。先用JSON-Generator生成5000条数据的JSON对象，并保存到data.json文件。可以用下面的规则：

[
'{{repeat(5000)}}',
{
_id:'{{objectId()}}',
age:'{{integer(20,40)}}',
name:'{{firstName()}}{{surname()}}',
company:'{{company().toUpperCase()}}'
}
]

新建一个VirtualList.vue文件，引入data.json，并将它赋值给组件的items属性。然后套一个组件：

VirtualList.vue：

virtual-scroller组件必须设置item-height。另外，由于我们要创建一个列表，可以设置content-tag="ul"，表示内容渲染成

vue-virtual-scroller支持使用scopedslots，增加了内容渲染的灵活性。通过使用slot-scope="props"，我们可以访问vue-virtual-scroller暴露的数据。

props有一个itemKey属性，出于性能考虑，我们应该在内容部分的根元素上绑定:key="props.itemKey"。然后我们就可以通过props.item拿到JSON里的原始数据了。

如果你要给列表设置样式，可以给virtual-scroller设置class属性：

或者也可以用scoped样式，用/deep/选择器：


.virtual-list/deep/ul{
list-style:none;
}

案例二：VirtualTable

类似VirtualList，我们再看一个表格组件VirtualTable：VirtualTable.vue:

这里有个小问题，我们需要增加一个标签，用于显示列名：Age,Name和Company

幸好virtual-scroller支持slot，可以定制各部分内容：

这些slot都可以放置自定义内容。container会被container-tag属性值替换，默认是div，content被content-tag值替换。

这里用before-contentslot加一个thead就行了：

请注意，我们把content-tag="table"改成了content-tag="tbody"，因为我们设置了container-tag="table"，这是为了构造table标签的常规结构。

如果要加一个tfoot，应该知道怎么做了吧。

总结

我们了解了无限滚动列表的性能优化原理，以及利用vue-virtual-scrollerVue插件创建了VirtualList和 VirtualTable组件。如果用它们来展示前面生成的5000条数据，应该可以比较流畅地渲染和滚动了。更多用法可以参考vue-virtual-scroller文档。

文章涉及的源码戳这里。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

Vue.js 无限滚动列表性能优化方案

热门推荐

随机推荐