• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

项目遇到的问题以及解决方法---小程序页面因数据量大带来问题的优化 ...

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

一 、问题描述:小程序开发中开发一个城市列表选择页,如下:

但是由于接口返回的城市数量过多,导致首屏白页的问题:

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

总结:针对数据量大的页面,可以在满足用户需求一步步优化。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap