微信小程序之提高应用速度小技巧
作者:vicyao, 腾讯web前端开发 高级工程师
商业转载请联系腾讯WeTest获得授权,非商业转载请注明出处。
原文链接:http://wetest.qq.com/lab/view/294.html
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()和 put()和take()。
为了通用性,Page上用到的公共的方法,比如 route、 route、put、 take都定义在了一个Page的基类里面。基类还同时保存了所有页面的list,这样就可以做到根据页面名调用具体页面的onNavigate方法。当然,并不是每个页面都需要实现onNavigate方法,对于没有定义onNavigate方法的, take都定义在了一个Page的基类里面。基类还同时保存了所有页面的list,这样就可以做到根据页面名调用具体页面的onNavigate方法。 当然,并不是每个页面都需要实现onNavigate方法,对于没有定义onNavigate方法的,route函数会跳过预加载环节,直接跳转页面。所以对于开发者来说,不需要关心别的页面实现了什么,对外看来完全透明。
2、用户行为预测
在上面的例子中,我们实现了用户主动点击页面,提前加载下一页面数据的方法。而在某些场景下,用户的行为可以预测,我们可以在用户还没点击的时候就预加载下个页面的数据。让下个页面秒开,进一步提升体验的流畅性。
继续以腾讯视频小程序为例,主界面分为3个页卡(大部分小程序都会这么设计),通过简单的数据分析,发现进入首页的用户有50%会访问第二个页卡。所以预加载第二个页卡的数据可以很大程度提高用户下个点击页面的打开速度。
同样,先看看代码实现。 首页预加载频道页的姿势:
频道页的实现方法:
跟第一个例子类似,这里定义了一个 preLoad()方法,同时给Page扩展了一个onPreload事件。页面调用 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平台可以免费使用。
腾讯WeTest服务器性能测试运用了沉淀十多年的内部实践经验总结,通过基于真实业务场景和用户行为进行压力测试,帮助游戏开发者发现服务器端的性能瓶颈,进行针对性的性能调优,降低服务器采购和维护成本,提高用户留存和转化率。
功能目前免费对外开放中,欢迎大家的体验!
体验地址:http://wetest.qq.com/gaps
如果对使用当中有任何疑问,欢迎联系腾讯WeTest企业qq:800024531
微信小程序之提高应用速度小技巧相关推荐
- 提高微信小程序的应用速度的常见方式有哪些? 小程序怎么实现下拉刷新? 简述微信小程序原理? 小程序的发布流程(开发流程)分析下微信小程序的优劣势?小程序授权登录流程? 小程序支付如何实现
小程序部分常见面试题 提高微信小程序的应用速度的常见方式有哪些? 提高页面加载速度 用户行为预测 减少默认data的大小 组件化方案 分包预下载 小程序与原生App相比优缺点? 优点: 基于微信平台开 ...
- 如何比较两个速度的大小地程序_58安居客小程序平台化与多小程序开发探索与实践...
导语 本文分享58安居客小程序团队在小程序向平台化转型.多小程序同步开发过程中遇到的问题.解决方案与实践. 背景 在提效.服务进阶的大背景下,为了让同一支团队,把一个业务做精做深,提高研发效率,HBG ...
- node.js+mysql+node基于微信小程序的校园失物招领小程序 毕业设计-附源码072343
微信小程序的校园失物招领系统 摘 要 随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,微信小程序的校 ...
- (附源码)node.js+mysql+node基于微信小程序的校园失物招领小程序 毕业设计072343
微信小程序的校园失物招领系统 摘 要 随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,微信小程序的校园 ...
- 【微信小程序】创建自己的小程序
文章目录 1.关于小程序 2.环境的搭建 2.1 Python环境 2.2 小程序环境 2.2.1 申请一个微信公众平台 2.2.2 保存自己的appid 2.2.3 下载开发者工具 2.2.4 创建 ...
- 从网页到微信小程序开发:一:小程序与普通网页的区别
提示:文章内容大部分摘抄微信官方文档,不喜勿喷,在此做个记录,同时也提出自己的思考和想法,希望看到的人也可以提出自己的看法,我会依照大家的看法不断修改文章,谢谢大家支持! 前言 相信有很多人都有过类似 ...
- 微信小程序自带地图_小程序丨教你:如何打开小程序如何打开微信自带的地图(附源码)...
教你小程序系列教程:教你小程序系列教程: 1.教你:微信小程序如何实现scroll-view隐藏滚动条 2.教你:如何使用scroll-view组件实现视图垂直滚动(附源码) 3.教你:小程序如何使用 ...
- 初级前端小程序项目加载速度优化
这份文字是根据近期团队做来问丁香医生 SPA 和 丁香医生小程序 加载速度优化的经历整理而成. 效果 古人有一句话叫做:治感冒看疗效.既然是关于速度优化的,我们就先来看一下优化的效果. 来问丁香医生 ...
- 微信小程序实验报告-----学生家教小程序
实验报告 课程名称:企业级前端应用开发实践 实验项目:学生家教小程序 实验地点: 专业班级: 学 号: 学生姓名: 指导教师: 年 月 日 实验报告 实验名称 学生家教系统 实验地点 实验日 ...
最新文章
- 短视频的生成,不要在技术上想当然
- webshpere MQ linux 上安装
- Dubbo设置超时时间
- 计算机语言 时间,甲骨文将ISO日期到计算机的语言环境日期/时间
- Python中通过PyPDF2实现PDF加密
- ReactJS入门之ReactJS简介
- 倒排文件索引(Inverted File Index)的建立
- mysql里面取列里面值_在MySQL中获取特定的列值(名称)
- iOS动画 三维透视投影 m34
- zookeeper集群节点热扩容和迁移详解
- dijit.layout.ContentPane--dojo学习
- 【STM32】 JDY-31蓝牙模块
- 电子面单打印通用解决方案(PHP代码示例)
- Spring AOP 之 通知、连接点、切点、切面
- win7如何设置wifi热点_mac如何共享网络?mac怎么建立wifi热点?
- Parallels Desktop | 在 Mac 里装 Windows 的最佳工具。
- 什么是ISO?ISO增值的作用
- byval 和byref的区别,今天刚明白。
- Sunflower——Google官方的Jetpack学习项目笔记(Java版)
- 视频加密选择在线加密还是软件加密好?