长列表解决方案之虚拟列表

什么是长列表？

前端的业务开发中会遇到一些数据量较大且无法使用分页方式来加载的列表，我们一般把这种列表叫做长列表。
完整渲染的长列表基本上很难达到业务上的要求的，非完整渲染的长列表一般有两种方式：

• 懒渲染：这个就是常见的无限滚动的，每次只渲染一部分（比如 10 条），等剩余部分滚动到可见区域，就再渲染另一部分。
  
• 可视区域渲染：只渲染可见部分，不可见部分不渲染。 虚拟列表就是采用的可视区渲染方式优化。

虚拟列表实现原理？

虚拟列表（Virtual List），是一种长列表优化方案，是可视区渲染列表。其两个重要的概念：

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

虚拟列表原理：
**_用数组保存所有列表元素的位置，只渲染可视区内的列表元素，当可视区滚动时，根据滚动的offset大小以及所有列表元素的位置，计算在可视区应该渲染哪些元素。 虚拟列表.png 具体实现步骤如下所示：

1. 首先确定长列表所在父元素的大小，父元素的大小决定了可视区的宽和高
2. 确定长列表每一个列表元素的宽和高，同时初始的条件下计算好长列表每一个元素相对于父元素的位置，并用一个数组来保存所有列表元素的位置信息
3. 首次渲染时，只展示相对于父元素可视区内的子列表元素，在滚动时，根据父元素的滚动的offset重新计算应该在可视区内的子列表元素。这样保证了无论如何滚动，真实渲染出的dom节点只有可视区内的列表元素。
4. 假设可视区内能展示5个子列表元素，及时长列表总共有1000个元素，但是每时每刻，真实渲染出来的dom节点只有5个。
5. 补充说明，这种情况下，父元素一般使用position：relative，子元素的定位一般使用：position：absolute或sticky

虚拟列表的小案例

react-virtualized使用

react-tiny-virtual-list源码解读