长列表优化之虚拟列表

长列表

用户端为保证较好用户体验，会采用上下无限滚动的方式，我们一般把这种列表叫做长列表。常见于移动端

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

为了解决上述问题，就引入了一种叫虚拟列表的解决方案。

虚拟列表的原理

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

如图示例，其组成一般包含3部分：

1. 可视区：滚动容器元素的视觉可见区域。

2. 列表渲染区：真实渲染列表元素的区域，列表渲染区大于等于可视区。

3. 真实列表区：又叫可滚动区，滚动容器元素的内部内容区域。

   
   image.png
   

   当用户操作滚动列表后：

4. 显示可视区中的元素（item3~item12）

5. 隐藏可视区外中的元素（item3和item12之外的）

   
   image.png

虚拟列表的实现

未完待续。。。