小程序带图长列表优化

最近做过的两个小程序都有出现闪屏或者退出小程序的问题，是什么造成的呢？

测试1

问题：image组件使用mode属性、图片过大也是导致的重要原因
解决：对于页面里面的图片，最好都把图片存储在（阿里云）服务器上，能够将图片进行一定的处理，比如裁剪。通过（阿里云）服务器来响应图片处理，然后请求图片时告诉（阿里云）服务器需要什么样的尺寸图片，由（阿里云）服务器响应对应尺寸图片，这样就可以解决图片变形并且压缩图片。（?x-oss-process=image/auto-orient,1/resize,p_80/quality,q_100）

测试2

问题：DOM节点过多 、 图片节点过多
分析：DOM节点过多会造成更多的内存占用。按照目前的微信小程序限制, 内存占用500M以上会出现卡顿, 甚至闪退. 如果列表中节点没有图片标签, 内存占用现象还不会太明显, 只是DOM节点过多会造成页面渲染耗时增加. 但当列表节点中含有图片时, 内存占用会迅速攀升.
解决：我们可以只对用户当前屏幕和上下两屏进行真实内容的加载, 对于其他用户暂时不可见的地方, 用空白的节点进行占位.可以参考微信官方文档扩展能力的recycle-view
https://developers.weixin.qq.com/miniprogram/dev/extended/component-plus/recycle-view.html

测试3

问题：列表过长，setData 列表数据太多
分析：按照分页的习惯，一般来说会把每一页请求的数据合并到上一次的数据中。对于小规模数据这样是非常方便快捷的。setdata官方建议的数据大小限制在1024kb，而数据量太大，就会影响内存消耗，渲染慢。
解决：使用的是二维数组的方式去存储列表
https://blog.csdn.net/dancy_xinyun/article/details/102968114