长列表优化

长列表优化

1. 定义 表现在结构相同的列表项。例如：新闻列表，商品列表等。它有两个特点： （1）后端接口一次给的数据非常多（>500条），没有提供分页的功能。 （2）出现在移动端

2. 问题 （1）同时将500条数据全部渲染出来有性能消耗。虽然数据都已经请求回来了，但是没有必要去创建500个对应的dom节点。在可视区内也放不下500条数据的结构呀，多余的也是浪费。

3. 解决策略 假设每条数据对应的高度的确定的，这样可以基于可视区内的高度计算出能展示的元素的个数，为表述方便，记为10个。

思路1：懒加载策略

初始展示10个。监听滚动条事件，到达底部时，再动态渲染接下来的10条。类似于上拉加载更多的效果。随着用户不断上拉，dom结构会越来越多。

它的好处在于已经生成的结构不会删除，通过真实元素的尺寸去撑起列表，实现也比较简单。确点在于如果数据量真的很大，最终页面上的dom太多，也可能有问题

思路2：虚拟列表

顾名思义，它不是真正的列表。可能一共就只有10个dom结构（为了更好的体验，可能会在前后增加一些冗余），也就是一屏的内容。与真实列表不同的是，虚拟列表中的元素自己撑不起来滚动条，它的滚动效果是通过transform或者是marginTop做的偏移量，这样在本身列表中只显示视窗区的DOM元素。

基本思路是：在监听滚动条事件的过程中，不断计算当前需要展示的数据，从而更新这10个dom结构。

好处在于dom节点的规模是可控的，难点在于计算当前需要展示的数据。特别是每个元素的高度不确定会导致计算位置有偏差（例如数据中包含图片，而图片的尺寸是不一样的。解决办法：先提前在页面之外求回来算好尺寸）

4. 实操

目前市面上已经有了很多成熟方案，可以先参考下，根据自己的需求，决定是否自己做改进。

懒加载策：ant-mobile的infinite-scroll和vant-ui的list。 虚拟列表：ahook中的 useVirtualList, vueuse的useVirtualList