详解微信小程序之提高应用速度小技巧


Posted in Javascript onJanuary 07, 2020

WeTest 导读

小程序科普类的文章已经很多了,今天这里讲的是针对小程序的优化方法,可以有效提高小程序的响应速度和用户体验。当然,开发体验也提高不少。

1、提高页面加载速度

在小程序这个环境下,怎样提高页面加载速度呢? 这个问题很大,我把问题具体一下,如何缩短从用户点击某个链接,到打开新页面的这段时间? 这里抛一个核心关键点:

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

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

知道有这个gap后,代码如何实现呢?

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

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

小程序首页:

详解微信小程序之提高应用速度小技巧

当用户点击海报图后,会执行以下代码(就一行):

详解微信小程序之提高应用速度小技巧

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

详解微信小程序之提高应用速度小技巧

播放页主要代码:

详解微信小程序之提高应用速度小技巧

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

老司机也许会发现这里有点蹊跷。在首页点击的时候,播放页根本就没有创建,对象都不存在,怎么访问到里面的方法呢?

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

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

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

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

详解微信小程序之提高应用速度小技巧

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

2、用户行为预测

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

继续以腾讯视频小程序为例,主界面分为3个页卡(大部分小程序都会这么设计),通过简单的数据分析,发现进入首页的用户有50%会访问第二个页卡。所以预加载第二个页卡的数据可以很大程度提高用户下个点击页面的打开速度。

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

详解微信小程序之提高应用速度小技巧

频道页的实现方法:

详解微信小程序之提高应用速度小技巧

跟第一个例子类似,这里定义了一个$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平台可以免费使用。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript IE中的DOM ready应用技巧
Jul 23 Javascript
JavaScript 原型学习总结
Oct 29 Javascript
JS子父窗口互相操作取值赋值的方法介绍
May 11 Javascript
javascript实现图片跟随鼠标移动效果的方法
May 13 Javascript
Javascript实现信息滚动效果
May 18 Javascript
使用jQuery实现动态添加小广告
Jul 11 jQuery
关于Stream和Buffer的相互转换详解
Jul 26 Javascript
在Js页面通过POST传递参数跳转到新页面详解
Aug 25 Javascript
Vue表单及表单绑定方法
Sep 04 Javascript
html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片
Jan 12 Javascript
微信小程序开发搜索功能实现(前端+后端+数据库)
Mar 04 Javascript
从0到1学习JavaScript编写贪吃蛇游戏
Jul 28 Javascript
小程序跨页面交互的作用与方法详解
Jan 07 #Javascript
JavaScript实现联动菜单特效
Jan 07 #Javascript
JS实现电商商品展示放大镜特效
Jan 07 #Javascript
JS实现字体背景跑马灯
Jan 06 #Javascript
JS实现音乐钢琴特效
Jan 06 #Javascript
React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析
Jan 06 #Javascript
Vue-CLI与Vuex使用方法实例分析
Jan 06 #Javascript
You might like
人族 Terran 魔法与科技
2020/03/14 星际争霸
PHP 图像尺寸调整代码
2010/05/26 PHP
使用Curl进行抓取远程内容时url中文编码问题示例探讨
2013/10/29 PHP
PHP中error_reporting()用法详解
2015/08/31 PHP
PHP对象实例化单例方法
2017/01/19 PHP
Laravel5.* 打印出执行的sql语句的方法
2017/07/24 PHP
ThinkPHP框架整合微信支付之JSAPI模式图文详解
2019/04/09 PHP
php根据地址获取百度地图经纬度的实例方法
2019/09/03 PHP
cookie丢失问题(认证失效) Authentication (用户验证信息)也会丢失
2009/06/04 Javascript
jquery 弹出层注册页面等(asp.net后台)
2010/06/17 Javascript
重载toString实现JS HashMap分析
2011/03/13 Javascript
JavaScript在XHTML中的用法详解
2013/04/11 Javascript
JavaScript中奇葩的假值示例应用
2014/03/11 Javascript
Javascript学习指南
2014/12/01 Javascript
最新最热最实用的15个jQuery插件汇总
2015/07/05 Javascript
jquery.cookie.js用法实例详解
2015/12/25 Javascript
多种js图片预加载实现方式分享
2016/02/19 Javascript
分享一个精简的vue.js 图片lazyload插件实例
2017/03/13 Javascript
Vue插值、表达式、分隔符、指令知识小结
2018/10/12 Javascript
angular组件间通讯的实现方法示例
2020/05/07 Javascript
[48:31]DOTA2-DPC中国联赛 正赛 Dynasty vs XG BO3 第一场 2月2日
2021/03/11 DOTA
Windows下python3.7安装教程
2018/07/31 Python
在win10和linux上分别安装Python虚拟环境的方法步骤
2019/05/09 Python
PyCharm 在Windows的有用快捷键详解
2020/04/07 Python
解决Python中报错TypeError: must be str, not bytes问题
2020/04/07 Python
大学生毕业求职找工作的自我评价
2013/09/29 职场文书
优秀广告词大全
2014/03/19 职场文书
出生公证书样本
2014/04/04 职场文书
关于长城的导游词
2015/01/30 职场文书
数学教师个人总结
2015/02/06 职场文书
2015年教学工作总结
2015/04/02 职场文书
大客户经理岗位职责
2015/04/09 职场文书
红色经典观后感
2015/06/18 职场文书
教师节作文之小学四年级
2019/09/03 职场文书
vue中利用mqtt服务端实现即时通讯的步骤记录
2021/07/01 Vue.js
十大最强格斗系宝可梦,超梦X仅排第十,第二最重格斗礼仪
2022/03/18 日漫