前端长列表解决方案

实现思路

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

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

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

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

可见区域：比如列表的高度是 300，右侧有纵向滚动条可以滚动，那么视觉可见的区域就是可见区域。

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

计算当前可见区域起始数据的 startIndex

计算当前可见区域结束数据的 endIndex

计算当前可见区域的数据，并渲染到页面中

计算 startIndex 对应的数据在整个列表中的偏移位置 startOffset，并设置到列表上

建议参考下图理解一下上面的步骤：

image

最简单的例子

这个章节会讲述如何把上面步骤变成代码，让这个逻辑在浏览器里真正的运行起来。

为了让这个例子足够简单，做了一个设定：每个列表项的高度都是 30px。在这个约定下，核心 JavaScript 代码不超过 10 行，但是可以完整的实现可见区域的渲染和更新。

我们首先要考虑的是虚拟列表的 HTML、CSS 如何实现，添加了这么几个样式：

列表元素（.list-view）使用相对定位

使用一个不可见元素（.list-view-phantom）撑起这个列表，让列表的滚动条出现

列表的可见元素（.list-view-content）使用绝对定位，left、right、top 设置为 0