本站:VPS评测参考推荐/专注分享VPS主机优惠信息!若您是商家可以在本站进行投稿,查看详情!此外我们还提供软文收录、PayPal代付、广告赞助等服务,查看详情! |
我们发布的部分优惠活动文章可能存在时效性,购买时建议在本站搜索商家名称可查看相关文章充分了解该商家!若非中文页面可使用Edge浏览器同步翻译!PayPal代付/收录合作 |
目的:
解决小程序响应速度慢,用户体验差的问题。
(学习视频分享:编程视频)
优化方法如下:
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平台免费使用。
推荐:小程序开发教程以上是如何解决小程序响应速度慢的详细内容。请多关注本站其他相关文章!
本文由本站刊发,转载请注明:如何解决小程序响应速度慢的问题(什么是小程序速度慢) https://本站.com/81035.html
推荐站内搜索:美国vps主机、icp备案、vps动态ip服务器、通过ip查地址、台湾服务器租用、香港vps、域名批量查询、免备案jsp空间、台湾服务器租用、免备案虚拟主机、