虚拟列表
1. 前言
我们先来看个问题：
某天，产品要求我们展示一个大数据列表（几万或者十几万条），但一次性渲染出来会存在性能问题，请问该怎么做？
- 分页
前端分页或者后端分页都可以，这是最常见的处理方式，也是最好的处理方式
那如果产品不想要分页，坚决不要，这时候该怎么办？答案是：
- 虚拟列表
下面的场景，我们来思考下：
一个订单列表容器高 200px，一个订单组件高 50px，也就是说最多能完整显示 4 个订单（部分出现的话是 5 个）
这时后台接口返回 100 个订单，于是我们把 100 个订单都渲染出来
但订单列表容器最多只能显示 5 个订单组件，也就是说订单 6-100 暂时是无用的，只有订单 1-5 是必须渲染的，只需要渲染必要的元素，这就是虚拟列表的核心思想
2. 什么是虚拟列表？
简单来说，就是通过计算，动态展示列表的一部分，达到节约资源的效果
通过scrollTop可以知道一个元素的内容垂直滚动的像素大小，计算出当前位置对应原列表元素的 index，从而渲染需要的列表部分
虚拟列表滚动过程：
<div style="display: flex; align-items: center; text-align: center;">
<div>
<img src={require("./assets/screenshots/23.png").default} width="150" />
<p>（1）初始状态</p>
</div>
<span> => </span>
<div>
<img src={require("./assets/screenshots/24.png").default} width="150" />
<p>（2）滑动一段距离</p>
</div>
<span> => </span>
<div>
<img src={require("./assets/screenshots/25.png").default} width="150" />
<p>（3）重新渲染后</p>
</div>
</div>
3. 固定高度实现
在滚动后，我们需要计算 top 的值
top为4个订单的高度
top为5个订单的高度
下面代码为了直接体现虚拟列表的实现，没有进行 api 抽象，详细请看：github
import React, { Component } from "react";
class VirtualList extends Component {
constructor(props) {
super(props);
this.list = new Array(100000).fill(null).map((_, index) => {
return index + 1;
});
this.height = 600; //容器高度
this.itemHeight = 60; //单个子元素高度
this.state = { visibleData: [], startOffset: 0, offsetHeight: 0 }; //初始化数据
this.totalHeight = this.list.length * this.itemHeight; //原列表总高度
this.visibleCount = Math.ceil(this.height / this.itemHeight); //容器可以显示的个数（向上取整）
this.startIndex = 0; //开始的index
this.endIndex = this.startIndex + this.visibleCount; //结束的index
}
componentDidMount() {
this.updateVisibleData(); //更新列表
}
updateVisibleData = () => {
const visibleData = this.list.slice(this.startIndex, this.endIndex);
const startOffset = this.startIndex * this.itemHeight;
const offsetHeight = visibleData.length * this.itemHeight;
this.setState({
visibleData,
startOffset,
offsetHeight,
});
};
handleScroll = (e) => {
const scrollTop = this.node.scrollTop;
const index = scrollTop / this.itemHeight;
this.startIndex = Math.floor(index);
this.endIndex =
this.startIndex + this.visibleCount + (index % 1 > 0 ? 1 : 0); //因为startIndex向下取整，所以endIndex需要根据情况适当+1
this.updateVisibleData();
};
renderListItem = (item) => {
return (
<div
key={item}
style={{
height: this.itemHeight,
boxSizing: "border-box",
borderBottom: "1px solid black",
}}
>
{item}
</div>
);
};
render() {
const { visibleData, startOffset, offsetHeight } = this.state;
return (
<div
style={{
position: "relative",
overflowY: "auto",
height: this.height,
border: "1px solid black",
}}
ref={(node) => (this.node = node)}
onScroll={this.handleScroll}
>
<div style={{ height: this.totalHeight }}>
<div
style={{
position: "absolute",
left: 0,
right: 0,
top: startOffset,
height: offsetHeight,
}}
>
{visibleData.map(this.renderListItem)}
</div>
</div>
</div>
);
}
}
export default VirtualList;
除了设置height来撑开滚动容器的高度，还可以使用padding和margin，但需要额外计算 bottom 的距离
4. 测试
下面是 react 创建长度为 100000 的列表需要的时间，其中渲染和 js 脚本占了大部分时间，分别是 4.9s 和 1.5s，渲染久很容易理解，毕竟需要处理 100000 个 dom 元素，脚本久主要是因为 react 里虚拟 dom 处理的原因
再下面是 react 创建长度为 100000 的虚拟列表需要的时间，可以看到 0.5s 都不到就渲染好了
5. 白屏？
有好处就有坏处，虚拟列表在快速滑动时，onScroll事件响应的速度如果未能跟上滑动的速度，就会导致向下滑动话新的页面没能及时渲染出来，这就是白屏问题
可以尝试缓存的方式，在首尾额外渲染一部分的元素，有一定缓存距离，这样不那么容易出现白屏问题，但事实上，滑动速度要是快过缓存距离还是会有白屏现象，尤其是拖动滚动条，所以说并不能完全解决问题
上面图示里，订单列表尾部多渲染了 3 个订单作为缓存，只要一次滑动的距离不超过 3 个订单高度，即使事件响应和渲染速度较慢，也不会出现白屏问题（向上滑动同理，只要首部增加缓存即可）
6. 缓存
增加缓存只需要修改startIndex和endIndex的逻辑即可
import React, { Component } from "react";
class VirtualList extends Component {
constructor(props) {
super(props);
this.list = new Array(100000).fill(null).map((_, index) => {
return index + 1;
});
this.cache = 5; //首尾缓存数量
... //省略
this.endIndex = this.startIndex + this.visibleCount + this.cache; //结束的index
}
...
handleScroll = e => {
const scrollTop = this.node.scrollTop;
const index = scrollTop / this.itemHeight;
const startIndex = Math.floor(index);
const offsetIndex = index % 1 > 0 ? 1 : 0;
if (startIndex >= this.cache) {
this.startIndex = startIndex - this.cache;
} else {
this.startIndex = 0;
}
if (
startIndex >=
this.list.length - (this.visibleCount + this.cache + offsetIndex)
) {
this.endIndex = this.list.length;
} else {
this.endIndex = startIndex + this.visibleCount + this.cache + offsetIndex;
}
this.updateVisibleData();
};
...
增加cache参数，修改handleScroll函数
7. 动态高度实现
上面的场景和实现都是以列表子元素固定高度来实现，那如果高度不固定该怎么办？
未完待续...
