【前端性能优化】长列表优化

 

1 什么是长列表？

1.1 概念
前端的业务开发中会遇到一些数据量较大且无法使用分页方式来加载的列表，我们一般把这种列表叫做长列表。

1.2 参考案例
比如淘宝网的商品列表页，一个手机屏可以容纳10个左右商品。如果每次只请求10个商品，一次请求10个商品和50个商品，数据返回所需要的时间相差不大。对于mysql优化，强调的也是减少查询的次数。所以说如果每次只请求10条数据对服务端来说压力会比较大，前端的长列表优化就变得比较重要。

 

2 优化方案

完整渲染的长列表基本上很难达到业务上的要求的，非完整渲染的长列表一般有两种方式：

2.1 懒渲染
2.1.1 懒渲染概念
就是常见的无线滚动，每次只渲染一部分（比如10条），等剩余部分滚到可见区域，再渲染一部分。

2.1.2 原理
用数组保存所有的数据，根据一屏幕能渲染的数量大致算出一次性渲染的数量，比如10，然后将数据源数组10个分为一组生产一个二维数组。列表后面跟着一个dom，监听滚动事件，当这个dom滚动到可视区域时，取出二维数组中数据来渲染。

 

2.2 可视区域渲染
这种方式只渲染可见部分，不可见部分不渲染。

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

可滚动区域：假设有1000条数据，每个列表项的高度是30，那么可滚动的区域的高度就是1000*30。当用户改变列表的滚动条的当前滚动值的时候，会造成可见区域的内容的变更。
可见区域：比如列表的高度是300，右侧有纵向滚动条可以滚动，那么视觉可见的区域就是可见区域。
2.2.2 虚拟列表原理：
用数组保存所有列表元素的位置，只渲染可视区内的列表元素，当可视区滚动时，根据滚动的offset大小以及所有列表元素的位置，计算在可视区应该渲染哪些元素。

3 使用建议

3.1 react-virtualized

如果使用react开发，可以使用antdesign官网推荐的组件，结合 react-virtualized 实现滚动加载无限长列表，带有虚拟化（virtualization）功能，能够提高数据量大时候长列表的性能。

3.2 vue-virtual-scroll-list

如果使用vue开发，建议使用 vue-virtual-scroll-list，功能原理都是使用虚拟列表来优化长列表渲染。

当然也可以参照上面代码示例自己实现懒加载或者虚拟列表来优化长列表。另外也可以使用textarea来优化长列表，将首屏意外的数据放在textarea标签内部，滚动过程中取出渲染，写法类似懒渲染。

参考地址

https://blog.csdn.net/qq_41831345/article/details/116710027