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

目的:

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

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

优化方法如下:

1.提高页面加载速度。

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

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

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

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

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

以腾讯视频小程序为例，说明技术实现。

小程序的主页:

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

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

播放页面主要代码:

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

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

下面是微信的页面机制。

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

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

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

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

2.用户行为预测

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

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

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

通道的实现方法:

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

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

3.减少默认数据的大小

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

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

4.组件方案

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

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

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

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

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

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

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

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

wxml:

wxss:

5.其他人

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

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

推荐:小程序开发教程以上是如何解决小程序响应速度慢的详细内容。请多关注主机参考其他相关文章！

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

• 下面来说说小程序中页面传递参数的几种方式（微信小程序页面传递值）。
• 如何在小程序中实现下拉刷新和上拉加载功能？（附代码）（小程序的上拉加载触发器）
• 如何在小程序中创建页面二维码
• 如何通过applet vant组件将默认样式单元px转换为rpx（Vantui applet）
• 再来说说微信小程序中的生命周期（功能）（请谈谈小程序的生命周期功能？)

本文由主机参考刊发，转载请注明：如何解决小程序响应速度慢的问题(什么是小程序速度慢) https://zhujicankao.com/81035.html