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

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

转载请注明出处：https://blog.youkuaiyun.com/sinat_27612147/article/details/80798452

写在前面

预加载方案的集成方式请参考上篇 小程序性能优化之预加载方案 集成篇

有网友发现，这个项目无法运行在使用了组件的小程序中，所以大家如果使用了组件的话，就不要直接用这个项目了。当然还是推荐你看下这个项目的思想，毕竟工程师在工作中思想是很重要的。

再次声明，这个预加载方案要求与服务器的通信时间，不能大于**350ms**，渲染时传入的data数据量也不能太大，若超过这个值或数据量过大，页面依旧会先空后有数据，也就是跳转后闪一下。如果超过了这个值，建议服务器优化数据处理速度，或者拆分协议，先请求一部分轻量级的数据，繁重的数据根据时机之后再请求。

还有，一定要记住，在真机上测试时，一定要关闭小程序的调试模式，否则，会极大的减慢渲染数据的速度！

技术原理流程图

技术原理详解

这个技术核心思想是延迟跳转和预加载。

延迟跳转

延迟跳转是什么？通常情况下，一个按钮，你都要给他加点击反馈的，在小程序的view组件里是有这么两种属性。

• hover-class：指定按下去的样式类。当 hover-class=“none” 时，没有点击态效果，默认值是none。
• hover-stay-time：手指松开后点击态保留时间，单位毫秒。默认值是400ms。

一个按钮的点击态持续时间，100ms的体验是很好的（我自己是这么感觉的，哈哈）。
按钮点击态可以这样处理：

1. 在wx.navigateTo上包裹一层setTimeout，延迟时间设置为150ms。
2. 给view添加了hover-class和hover-stay-time这两个属性。
3. 指定hover-stay-time的值为100。这里比上面少了50ms是为了让用户看到点击态消失时页面再跳转，体验要好很多。

这样就实现了延迟加载。
从点击按钮开始算，到执行第二个页面的onLoad方法，我们算下现在页面跳转的总时间，大概在200ms左右：

• 延迟150ms执行wx.navigateTo。
• 本身的普通跳转时间50ms

到此为止，跳转页面的时间从原来的50ms被活生生拖到了200ms。（在这里多说几句，js单线程原因，setTimeout函数是不准确的，而且普通跳转的50ms也是有上下浮动的。所以这个200ms是大概的一个值。）
你可能会很纳闷，不是要缩短加载时间吗，怎么这还得拖长时间呢？我说下我考虑的几个方面。
假设一个协议的总时间是300ms。我们取一个两个极端情况，页面跳转不花时间，打开一个新页面只花协议收发的300ms，那么有两种选择，一个是正常的方式，页面打开后发协议，等300ms看到结果；还有一个是，立刻发送协议，同时花300ms的时间来等待获取数据，获取到后进行页面跳转，那么跳转到下个页面时，数据能立刻被渲染出来！
这两种情况对应了用户的两种心态：

1. 就算是0ms跳转完成，第二个页面没有获取到数据，用户也是一种等待的心理，也要等获取到数据后才能看到页面的样子，还会感觉你这页面加载好慢啊。
2. 如果一个页面的跳转的做150ms的延迟处理，再加上本身跳转需要的50ms，会极大的延长跳转时间，但是却能保证轻量级的协议在这段时间内有足够的时间来完成预加载。
3. 将按钮的点击态持续时间设置为100ms，既可以延缓用户在点击按钮时等待跳转的焦急心理，又能提供额外的时间来预加载。

所以我们可以这么处理，点击按钮立即发送协议，同时延迟150ms跳转，用按钮的点击态100ms来遮盖延迟跳转造成的等待时间，之后再花50ms时间完成页面跳转。页面跳转完成后，从开始执行onLoad()函数到页面首次渲染数据时不闪屏的极限时间是150ms