小程序性能优化之页面预加载方案 集成篇
转载请注明出处:https://blog.csdn.net/sinat_27612147/article/details/80802725
前言
之前看到一篇文章,《微信小程序之提高应用速度小技巧》,是讲如何实现小程序在触发页面跳转前就请求协议,利用跳转页面的短短200~300ms的时间,获取到数据并渲染到页面上,实现数据在小程序页面中预加载。这种技术,可以缩短用户的等待时间,极大的提升用户的使用体验。但是那篇文章中只是讲述了技术原理,并没有实际教大家如何编写,那么今天我来具体的讲下这个技术实现方式。
框架优缺点
优点:
- 预加载下一个页面的数据,提高了页面的加载速度,轻量级的协议(200~300ms左右就能接收到数据)能轻松让小程序页面打开后数据瞬间加载,几乎不出现空页面。
- 让同种业务的代码保持在一个类中,不会破坏项目结构。
- 代码量非常少,对原本业务影响非常少。
- 实现预加载后想删掉预加载?只需在实现的类中删除一个字符串即可。
缺点:
- 需要你按情况替换
setData
为$setData
- 需要开发者非常清楚各情况下的上下文是什么。
- 如果你的协议非常耗时,达到400ms以上的,使用这种优化方式效果就不明显了。
- 有网友发现,这个项目
无法运行在使用了组件的小程序中
,所以大家如果使用了组件
的话,就不要直接
用这个项目 了。不过还是推荐你吸收下这个项目的思想,毕竟工程师在工作中思想是很重要的。
当然,还是先给大家看下具体的效果。
最终效果
这里展示的是一条协议总时间是300ms的加载效果。这里是用setTime()来模拟的。一个是今天要介绍的预加载方式(跳转前就开始请求协议)和普通加载方式(跳转后才开始请求协议),可以看到,普通加载方式,在跳转页面成功后,页面会先空,后有数据;而预加载方式一进到页面就有数据。这里主要是用Android手机来测试的(型号是魅族pro6),点击按钮时是有点击态的,但是颜色太浅,淡蓝色,不容易看出来。这个点击态在预加载方案中的地位是非常重要的!!