长列表优化之虚拟列表

什么是长列表

在前端的业务开发中，经常会碰到列表项，如果列表项数量过多，一般则会采用分页的方式来处理，而分页的形式也有2种：

• 前后翻页
• 上下滚动

前后翻页一般多用于后台管理系统中；而在用户端为保证较好用户体验，会采用上下无限滚动的方式，我们一般把这种列表叫做长列表。

长列表的问题

目前看来无限滚动的长列表对用户来说体验是很好的，但是这里会有个问题，当用户滚动的屏数过多时，就会出现页面滑动卡顿、数据渲染较慢、白屏的问题，究其原因是列表项过多，渲染了大量dom节点。 为了解决上述问题，就引入了一种叫虚拟列表的解决方案。

虚拟列表的原理

只对可见区域进行渲染，对非可见区域中的数据不渲染或部分渲染的技术，从而达到极高的渲染性能，虚拟列表其实是按需显示的一种实现。 如图示例，其组成一般包含3部分：

1. 可视区：滚动容器元素的视觉可见区域。
2. 列表渲染区：真实渲染列表元素的区域，列表渲染区大于等于可视区，其中缓存区是为了解决滑动过快导致部分白屏。
3. 真实列表区：又叫可滚动区，滚动容器元素的内部内容区域，就是实际列表的总高度。

虚拟列表的实现

基本思路是滑动时找到startIndex开始的元素到endIndex的元素进行渲染即可

1. startIndex：可视区第一个元素标号（图示中为3）
2. endIndex：可视区最后一个元素标号（图示中为12）
3. startOffset：可视区第一个元素的向上偏移量 当用户滚动列表时：
4. 计算可视区的 startIndex 和 endIndex
5. 根据 startIndex 和 endIndex 渲染数据
6. 计算 startOffset 偏移量并设置到列表渲染区

参考