再谈前端虚拟列表的实现
书接上文,在之前的 聊聊前端开发中的长列表 中,笔者对「可视区域渲染」的列表进行了介绍,并写了一个简化的例子来展现如何实现。这种列表一般叫做 Virtual List,在本文中会使用「虚拟列表」来指代。在本文中,笔者会把上篇文章中的简化例子一步步强化成一个相对通用、性能优异的虚拟列表组件,旨在讲清楚虚拟列表的实现思路。阅读本文不需要阅读上一篇文章,但代码是使用 Vue.js 来实现的,所以你需要有 Vue.js 的使用经验。另外,提供了各个步骤的 JSFiddle,如果有不懂的地方,建议通过修改 JSFiddle 在线运行调试。
实现思路
在讲解下面的内容之前,先对虚拟列表做一个简单的定义。
因为 DOM 元素的创建和渲染需要的时间成本很高,在大数据的情况下,完整渲染列表所需要的时间不可接收。其中一个解决思路就是在任何情况下只对「可见区域」进行渲染,可以达到极高的初次渲染性能。
虚拟列表指的就是「可视区域渲染」的列表,重要的基本就是两个概念:
- 可滚动区域:假设有 1000 条数据,每个列表项的高度是 30,那么可滚动的区域的高度就是 1000 * 30。当用户改变列表的滚动条的当前滚动值的时候,会造成可见区域的内容的变更。
- 可见区域:比如列表的高度是 300,右侧有纵向滚动条可以滚动,那么视觉可见的区域就是可见区域。
实现虚拟列表就是处理滚动条滚动后的可见区域的变更,其中具体步骤如下:
- 计算当前可见区域起始数据的 startIndex
- 计算当前可见区域结束数据的 endIndex
- 计算当前可见区域的数据,并渲染到页面中
- 计算 startIndex 对应的数据在整个列表中的偏移位置 startOffset,并设置到列表上
建议参考下图理解一下上面的步骤:
最简单的例子
这个章节会讲述如何把上面步骤变成代码,让这个逻辑在浏览器里真正的运行起来。
为了让这个例子足够简单,做了一个设定:每个列表项的高度都是 30px。在这个约定下,核心 JavaScript 代码不超过 10 行,但是可以完整的实现可见区域的渲染和更新。
我们首先要考虑的是虚拟列表的 HTML、CSS 如何实现,添加了这么几个样式:
- 列表元素(.list-view)使用相对定位
- 使用一个不可见元素(.list-view-phantom)撑起这个列表,让列表的滚动条出现
- 列表的可见元素(.list-view-content)使用绝对定位,left、right、top 设置为 0
CSS 代码如下:
.list-view {
height: 400px;
overflow: auto;
position: relative;
border: 1px solid #aaa;
}
.list-view-phantom {
position: absolute;
left: 0;
top: 0;
right: 0;
z-index: -1;
}
.list-view-content {
left: 0;
right: 0;
top: 0;
position: absolute;
}
.list-view-item {
padding: 5px;
color: #666;
line-height: 30px;
box-sizing: border-box;
}
HTML 代码如下(先忽略其中的事件、变量绑定):
<template>
<div
class="list-view"
@scroll="handleScroll">
<div
class="list-view-phantom"
:style="{
height: contentHeight
}">
</div>
<div
ref="content"
class="list-view-content">
<div
class="list-view-item"
:style="{
height: itemHeight + 'px'
}"
v-for="item in visibleData">
{
{ item.value }}
</div>
</div>
</div>
</template>
JavaScript 代码如下:
export default {
name: 'ListView',
props: {
data: {
type: