项目遇到的问题以及解决方法---小程序页面因数据量大带来问题的优化
一 、问题描述:小程序开发中开发一个城市列表选择页,如下:
但是由于接口返回的城市数量过多,导致首屏白页的问题:
怎么优化这个问题?
1. 首先考虑是把接口返回数据存储为本地文件,进行本地加载,可以节约请求回显时间,但是这种做法并没有使问题获得改善,这表示接口返回应该是很快的,请求或者本地并不是主要影响,那么主要影响可能是在真机上数据太大导致列表渲染耗时太长。
2. 采用本地、分段加载:把按照A-Z的城市列表分为两段,第一段较短,可以比较快的加载出来,解决白页问题,尽管白页问题解决了,但是由于数据采用分段,下半段数据可能并没有加载完,导致用户在刚进去立即点击城市或者索引的时候,点击无效,那这怎么办?
3. 对于2中刚进去立即点击城市无效考虑可能是第二段加载还没完成导致的,那对于2我们还可以怎么优化呢?我们可以从用户角度思考,用户进来之后可能会有三种操作,这三种操作涉及三个函数:点击可以看到的城市(基本是热门城市)(cityTap);点击字母索引(clickLetter);滑动(bindScroll)。其中第一种操作不会涉及到第二段加载,后两种操作会涉及到第二段加载,那就可以考虑对用户第一种操作优化: 为了能让用户刚进来点击城市能够成功,我们可以在此时让第二段先不在加载。
4. 针对3中描述的具体做法是对第一段加载和第二段加载设置标志位:firstdata=0和seconddata=0, 首屏仅加载第一段并把firstdata设为1,那当前和热门城市都可以用firstdata控制展示;只有当用户点击字母索引或者滑动时候(clickLetter,bindScroll)在加载第二段,并把seconddata=1.
总结:针对数据量大的页面,可以在满足用户需求一步步优化。