再谈前端虚拟列表的实现

再谈前端虚拟列表的实现

 

书接上文，在之前的 聊聊前端开发中的长列表 中，笔者对「可视区域渲染」的列表进行了介绍，并写了一个简化的例子来展现如何实现。这种列表一般叫做 Virtual List，在本文中会使用「虚拟列表」来指代。在本文中，笔者会把上篇文章中的简化例子一步步强化成一个相对通用、性能优异的虚拟列表组件，旨在讲清楚虚拟列表的实现思路。阅读本文不需要阅读上一篇文章，但代码是使用 Vue.js 来实现的，所以你需要有 Vue.js 的使用经验。另外，提供了各个步骤的 JSFiddle，如果有不懂的地方，建议通过修改 JSFiddle 在线运行调试。

实现思路

在讲解下面的内容之前，先对虚拟列表做一个简单的定义。

因为 DOM 元素的创建和渲染需要的时间成本很高，在大数据的情况下，完整渲染列表所需要的时间不可接收。其中一个解决思路就是在任何情况下只对「可见区域」进行渲染，可以达到极高的初次渲染性能。

虚拟列表指的就是「可视区域渲染」的列表，重要的基本就是两个概念：

• 可滚动区域：假设有 1000 条数据，每个列表项的高度是 30，那么可滚动的区域的高度就是 1000 * 30。当用户改变列表的滚动条的当前滚动值的时候，会造成可见区域的内容的变更。
• 可见区域：比如列表的高度是 300，右侧有纵向滚动条可以滚动，那么视觉可见的区域就是可见区域。

实现虚拟列表就是处理滚动条滚动后的可见区域的变更，其中具体步骤如下：

1. 计算当前可见区域起始数据的 startIndex
2. 计算当前可见区域结束数据的 endIndex
3. 计算当前可见区域的数据，并渲染到页面中
4. 计算 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: