怎么解决小程序响应速度慢的问题（小程序加载速度慢）

怎么解决小程序响应速度慢的问题（小程序加载速度慢）

程序员必备接口测试调试工具：立即使用Apipost = Postman + Swagger + Mock + Jmeter Api设计、调试、文档、自动化测试工具 后端、前端、测试，同时在线协作，内容实时同步

目的：

解决小程序响应速度慢，用户体验差的问题。

（学习视频分享：编程视频）

优化方法如下：

1、提高页面加载速度

这个延迟说短不短，我们可以利用这段时间，预先发起新页面所需要的网络请求。这样一来，就节省了100-300ms（或者一个网络请求的时间）。

知道有这个gap后，代码如何实现呢？

说白了，就是实现一个在A页面预加载B页面数据的功能。但而这种跨页面的调用，很容易把逻辑搞复杂，将不同页面的逻辑耦合在一起。所以，我们希望将预加载的逻辑隐藏于无形中，不增加任何的页面间耦合，以及开发复杂度。

下面以腾讯视频小程序为例，讲解下技术实现。

小程序首页：

接下来程序会加载播放页：

播放页主要代码：

可以看到，不管是外部页面的调用还是实际逻辑的实现都非常简洁。在第二个页面中，我们扩展了Page的生命周期函数，增加了onNavigate方法。该方法在页面即将被创建但还没开始创建的时候执行。

这里就要说下微信的页面机制。

在小程序启动时，会把所有调用Page()方法的object存在一个队列里（如下图）。每次页面访问的时候，微信会重新创建一个新的对象实例（实际上就是深拷贝）。

而接下来马上要被创建的B页面，又是另外一个object。所以，在onNavigate和onLoad方法中，this指针指的不是同一个对象，不能把临时数据存储在当前object身上。因此我们封装了一对全局的缓存方法，$put()和$take()。

为了通用性，Page上用到的公共的方法，比如$route、$put、$take都定义在了一个Page的基类里面。基类还同时保存了所有页面的list，这样就可以做到根据页面名调用具体页面的onNavigate方法。 当然，并不是每个页面都需要实现onNavigate方法，对于没有定义onNavigate方法的，$route函数会跳过预加载环节，直接跳转页面。所以对于开发者来说，不需要关心别的页面实现了什么，对外看来完全透明。

2、用户行为预测

同样，先看看代码实现。 首页预加载频道页的姿势：

频道页的实现方法：

跟第一个例子类似，这里定义了一个$preLoad()方法，同时给Page扩展了一个onPreload事件。页面调用$preLoad()后，基类会自动找到该页面对应的onPreload函数，通知页面执行预加载操作。 跟第一个例子不同，这里预加载的数据会保存在storage内，因为用户不一定会马上访问页面，而把数据存在全局变量会增加小程序占用的内存。微信会毫不犹豫的把内存占用过大的小程序给杀掉。

也许对于大部分有app开发经验的同学来说，更普遍的做法是先让页面展示上次缓存的数据，再实时拉取新数据，然后刷新页面。这个方法在小程序上也许体验并不太好，原因是小程序的性能以及页面渲染速度都不如原生app。将一个大的data传输给UI层，是一个很重的操作。因此不建议采用这种方法。

3、减少默认data的大小

刚刚说到，页面打开一个新页面时微信会深拷贝一个page对象，因此，应该尽量减少默认data的大小，以及减少对象内的自定义属性。有图有真相：

以一个100个属性的data对象为测试用例，在iphone6上，页面的创建时间会因此增加150ms。

4、组件化方案

微信没有提供小程序的组件化方案（相信一定在实现中）。但开谈不说组件化，写再多代码也枉然。这里演示一个简单的组件化实现。

以腾讯视频播放页为例，页面定义如下：

其中，P()函数是自定义的基类。这是一个非常有用的东西，可以把所有通用的逻辑都写在基类里面，包括pv统计，来源统计，扩展生命周期函数，实现组件化等。

函数第一个参数是页面名称，作为页面的key。第二个是page对象，其中扩展了一个comps数组，里面就是所有要加载的组件。

以播放器组件/comps/player/index.js为例：

组件的定义跟一个普通Page对象一模一样，有data属性，onLoad、onShow等事件，也有页面响应的回调方法。wxml模板里定义的事件和js事件一一对应。

基类做的事情，就是把这些组件对象的属性和方法复制到Page对象上（浅拷贝）。其中data属性会merge到一起。而微信预定义的生命周期函数（包括自己扩展的），则封装成队列按序执行。比如当系统调用onLoad方法时，实际上是执行了所有组件的onLoad方法，最后再执行Page的onLoad。

以上是代码部分，至于wxml模板和wxss部分，就要手工import过去了。

wxml：

wxss：

5、其他

虽然小程序已经足够小巧，但启动速度还是有那么2-3秒，无法做到秒开。楼主尝试对小程序的启动时间做优化，但没有找到多少有价值的优化点。单个页面的初始化只需要1-2ms。也许大部分时间消耗在了微信跟服务器端通信的过程中。

所幸，腾讯提供了一个可以自主进行服务器性能测试的环境，用户只需要填写域名和简单的几个参数就可以获知自己的服务器性能情况，目前在腾讯WeTest平台可以免费使用。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。