如何解决小程序响应慢的问题（如何解决小程序响应慢的问题）

目的:

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

(学习视频分享:编程视频)

优化方法如下:

1、提高页面加载速度

在小程序的环境下，如何提高页面加载速度？这是个大问题。我来详细解释一下。如何缩短从用户点击链接到打开新页面的时间？这里有一个核心点:

从页面响应用户点击行为开始跳转到触发新页面的onload事件有延迟，大概是100-300 ms(Android的响应比ios慢)。

这个延迟不短，我们可以利用这个时间提前发起新页面所需的网络请求。这样就节省了100-300ms(或者一个网络要求的时间)。

知道了这个差距，代码怎么实现？

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

我们以腾讯的视频小程序为例，来说明一下技术实现。

小程序主页:

当用户点击海报时，将执行下面的代码(只有一行):

接下来，程序将加载播放页面:

播放页面主要代码:

可以看出，无论是外部页面的调用，还是实际逻辑的实现，都非常简洁。在第二页中，我们扩展了Page的生命周期功能，并添加了onNavigate方法。当即将创建页面但尚未开始创建时，将执行此方法。

老司机可能会发现这里有些奇怪。当您单击主页时，根本不会创建播放页面，对象也不存在。你如何访问里面的方法？

这里是微信的页面机制。

当applet启动时，所有调用Page()方法的对象将被存储在一个队列中(如下所示)。每次访问一个页面，微信都会重新创建一个新的对象实例(其实是深度拷贝)。

也就是说，在A页执行点击响应事件时，B页的实例还没有创建，此时调用的onNavigate方法实际上是Page对象的原型(小程序启动时创建的那个)。

而下一个要创建的B页是另一个对象。因此，在onNavigate和onLoad方法中，this指针不指向同一个对象，并且临时数据不能存储在当前对象中。所以我们封装了一对全局缓存方法，$put()和$take()。

为了通用性，Page上常用的方法，比如$route、$put和$take，都是在Page的一个基类中定义的。基类同时还保存了所有页面的列表，这样就可以根据页面名称调用特定页面的onNavigate方法。当然，并不是每个页面都需要实现onNavigate方法。对于那些没有定义onNavigate方法的页面，$route函数将跳过预加载步骤，直接跳转到页面。所以对于开发者来说，不需要关心其他页面实现了什么，对外界完全透明。

2.用户行为预测

在上面的例子中，我们已经实现了用户主动点击页面，预先加载下一页数据的方法。在某些场景下，用户的行为是可以预测的，我们可以在用户点击之前预加载下一页的数据。让下一页秒开，进一步提升体验的流畅性。

以腾讯视频小程序为例，主界面分为三个选项卡(大部分小程序都会这样设计)。通过简单的数据分析发现，50%进入首页的用户会访问第二个标签页。因此预加载第二页卡片的数据可以大大提高用户点击下一页的打开速度。

还是那句话，先看代码实现。主页上预加载频道页面的姿态:

频道页面的实现方法:

与第一个示例类似，这里定义了一个$preLoad()方法，并将onPreload事件扩展到Page。页面调用$preLoad()后，基类会自动找到页面对应的onPreload函数，通知页面执行预加载操作。与第一个例子不同的是，这里预加载的数据将存储在存储中，因为用户可能不会立即访问页面，而将数据存储在全局变量中会增加小程序占用的内存。微信会毫不犹豫的杀掉占用内存太多的小程序。

可能对于大部分有app开发经验的同学来说，更常见的是让页面显示上次缓存的数据，然后实时拉取新的数据，再刷新页面。这种方法在小程序中可能不太好，因为小程序的性能和页面渲染速度都不如原生app。将大量数据传输到UI层是一项繁重的操作。因此，不推荐这种方法。

3.减少默认数据的大小

就像刚才说的，当一个页面打开一个新的页面，微信会深度复制一个页面对象。因此，我们应该尽量减少默认数据的大小，减少对象中的自定义属性。有图有真相:

以一个有100个属性的数据对象为测试用例，在iphone6上，页面创建时间会增加150 ms..

4.组件方案

微信并没有为小程序提供组件化的方案(相信一定会实现)。但是说什么组件化，写再多代码也没用。下面是一个简单的组件实现。

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

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

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

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

组件的定义和普通的页面对象完全一样，包括数据属性，onLoad、onShow等事件，以及页面响应的回调方法。wxml模板中定义的事件与js事件一一对应。

基类所做的是将这些组件对象的属性和方法复制到页面对象(浅层复制)。其中数据属性被合并在一起。将微信预定义的生命周期功能(包括自己的扩展)打包成队列，依次执行。比如系统调用onLoad方法，实际上是执行所有组件的onLoad方法，最后执行页面的onLoad。

以上是代码部分。至于wxml模板和wxss部分，将手动导入。

wxml:

wxss:

5.其他人

小程序虽然够小，但启动速度还是2-3秒，秒开不了。楼主试图优化小程序的启动时间，但是没有找到很多有价值的优化点。初始化一个页面只需要1-2ms。也许大部分时间都是在微信和服务器沟通的过程中度过的。

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

相关推荐:小程序开发教程

这几篇文章你可能也喜欢：

• 如何解决小程序响应速度慢的问题(什么是小程序速度慢)

本文由主机参考刊发，转载请注明：如何解决小程序响应慢的问题（如何解决小程序响应慢的问题） https://zhujicankao.com/118503.html