#虚拟列表

背景

手上有个字幕编辑器的项目,因为长视频也许会有几千条字幕,所以字幕编辑器的列表中就会有几千条列表项。
但是如果将这几千条列表项全部渲染在 DOM 中,就会造成浏览器轻则卡顿,重则卡死,根本无法正常使用。
针对这种情况,我通过 Google 了解到可以通过虚拟列表技术来解决。
虚拟列表做的事情,就是按需渲染。只需要渲染当前视图需要显示的几个条目和即将滚动到的几个条目。在开发者工具中可以发现,DOM 中只存在这么几条列表项,当滚动的时候会替换这几项。所以大大节省了系统资源,提升了用户体验。
我在 GitHub 上找了几个基于Vue.js 的虚拟列表实现,最终找到了一个最合适的 vue-virtual-scroll-list ,并在项目中进行了使用。
我在闲暇之余研读了一下此项目的代码,发现实现方式比想象中还要简单。

核心实现

this.$slots.default类型为数组,存储的是此组件两标签中的内容,在此特指大量的列表项。
通过 Vue 数组的 filter 方法,筛选出处于当前视图中的几个项,选择性的只渲染出这几个在 DOM 中。渲染是依据 Vue 的 render 函数来动态定义组件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
export default {
name: 'item',
props: [
'item',
'k'
],
render: function (createElement) {
return createElement(
'div',
this.$slots.default.filter(function (slot, index) {
return index > 5 && index < 10
})
)
}
}