关于页面的加载速度
12月初的时候,刚刚换完项目组的我终于迎来了自己独立完成的第一个项目:旅游产品活动页面.这是目前我接手的独立完成的最大的一个项目.
- 整个项目周期大约为两个礼拜,内容包括:
- 根据活动时间判断一键领取多个优惠券;
- 九宫格式抽奖及轮播中奖信息;
- 根据时间轴返回每天的秒杀数据;
- 遍历不同的产品列表等...
其实整个项目看起来真的没有什么,而且有些功能自己之前也是写过的,但是真正自己做的时候却漏洞百出,今天先不说那些小错误小漏洞,说一下自己千辛万苦写完的页面遇到的最大的问题:加载速度巨慢!
项目刚完成的时候内心非常的开心,但当上线之后发现打开自己的页面居然最少需要20s,最多甚至达到了30s,有的用户反馈根本的打不开,反思一下,自己如果是用户的话根本就不能忍受啊,于是在公司前辈的帮助下开始着手优化速度.
1.首先最简单的,页面的图片加载速度.因为有的一些图片UI给我的时候是很高清的图片,很多都是大小超过2M的了,这样的图片加载起来真的很慢,所以就在线压缩了一下,压缩过后真的快了一些,推荐一个在线压缩网站:Timog这个真的很好用,单张图片的大小最大支持30M,完全够用啊.
如果是jpg文件也可以尝试把它用PS转化为渐进式加载,这样图片是以由模糊逐渐清晰的加载的,有的时候也蛮好用的.
当然如果项目是用jQuery开发的,那么也可以用lazyload实现懒加载,这个方法对于图片比较多的页面是很好用的,推荐推荐.
2.因为项目中有一个功能是返回用户中奖信息,虽然之前活动有过这个功能,这次只是在之前的基础上改动一下,但就是这次发现了问题.之前返回的用户中奖记录是所有用户的,而之前的活动一般的时间都很短,所以用户的中奖信息很少,但这次的活动持续的时间很长,每天都有用户抽中奖品,大量的用户抽奖记录导致页面加载的时候很慢,于是就和产品经理和后端工作人员沟通了一下改动了接口,从之前返回所有的用户中奖记录改成只返回最近50条用户的中奖记录.这样又大大的优化了加载速度.
3.关于产品渲染.因为这次做的项目有大量的产品渲染,很大一部分的渲染是不需要任何逻辑的只是单纯的显示,对于这部分产品数据在调用的时候我选择了异步加载"async = true",这也提升了加载速度.
4.避免多次频繁调用接口,尤其是会返回大量数据的接口.我的项目中就有一个接口同时给我返回两个模块的数据,但在书写代码的时候我并不是把渲染两个模块数据的代码写在同一个接口中,而是将这个接口调用了两次!优化了之后提速了很多啊,然后又发现了一些其他的无用接口,删除了之后加载速度也得到了优化.
以上就是我在第一个项目中关于页面加载速度学习到的一些东西,都是很肤浅的很简单的东西,希望各位大神多多指教多多批评,感激不尽.