小程序性能优化之页面预加载方案——让你的小程序运行如飞 集成篇

小程序性能优化之页面预加载方案 集成篇

转载请注明出处：https://blog.csdn.net/sinat_27612147/article/details/80802725

前言

之前看到一篇文章，《微信小程序之提高应用速度小技巧》，是讲如何实现小程序在触发页面跳转前就请求协议，利用跳转页面的短短200~300ms的时间，获取到数据并渲染到页面上，实现数据在小程序页面中预加载。这种技术，可以缩短用户的等待时间，极大的提升用户的使用体验。但是那篇文章中只是讲述了技术原理，并没有实际教大家如何编写，那么今天我来具体的讲下这个技术实现方式。

框架优缺点

优点：

• 预加载下一个页面的数据，提高了页面的加载速度，轻量级的协议（200~300ms左右就能接收到数据）能轻松让小程序页面打开后数据瞬间加载，几乎不出现空页面。
• 让同种业务的代码保持在一个类中，不会破坏项目结构。
• 代码量非常少，对原本业务影响非常少。
• 实现预加载后想删掉预加载？只需在实现的类中删除一个字符串即可。

缺点：

• 需要你按情况替换setData为$setData
• 需要开发者非常清楚各情况下的上下文是什么。
• 如果你的协议非常耗时，达到400ms以上的，使用这种优化方式效果就不明显了。
• 有网友发现，这个项目无法运行在使用了组件的小程序中，所以大家如果使用了组件的话，就不要直接用这个项目 了。不过还是推荐你吸收下这个项目的思想，毕竟工程师在工作中思想是很重要的。

当然，还是先给大家看下具体的效果。

最终效果

这里展示的是一条协议总时间是300ms的加载效果。这里是用setTime()来模拟的。一个是今天要介绍的预加载方式（跳转前就开始请求协议）和普通加载方式（跳转后才开始请求协议），可以看到，普通加载方式，在跳转页面成功后，页面会先空，后有数据；而预加载方式一进到页面就有数据。这里主要是用Android手机来测试的（型号是魅族pro6），点击按钮时是有点击态的，但是颜色太浅，淡蓝色，不容易看出来。这个点击态在预加载方案中的地位是非常重要的！！