开发 | 这 4 个绝招,让你的小程序告别卡顿,流畅如飞

文 | vic yao

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

1. 提高页面加载速度——前端永恒不变的话题

在小程序这个环境下,怎样提高页面加载速度呢?

这个问题很大,我把问题再改得具体一点:如何缩短从用户点击某个链接,到打开新页面的这段时间?

这里抛一个核心关键点:

从页面响应用户点击行为开始跳转,到新页面 onload 事件触发之间,存在一个延迟,这个延迟大概在 100-300 ms 之间(不同机型会有差异)。

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

那么,如何利用这段 gap,提高页面加载速度呢?说白了,就是实现跨页预加载数据的功能。但而这种跨页面的调用,很容易把逻辑搞得非常复杂。

所以,我们的目标就是:将预加载的逻辑隐藏于无形中,不增加任何的页面间耦合,以及开发复杂度。

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

小程序首页:

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

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

播放页主要代码:

可以看到,不管是外部页面的调用还是实际逻辑的实现都非常简洁。

在第二个页面中,我们扩展了 Page 的生命周期函数,增加了 onNavigate 方法。该方法会在页面即将被创建、但还没开始创建的时候执行。

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

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

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

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

而接下来马上要被创建的新页面,又是另外一个 object。所以,在 onNavigateonLoad 方法中,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 传输给视图层,是一个很重的操作。因此不建议采用这种方法。

3. 减少默认 data 的大小

刚刚说到,页面打开一个新页面时微信会深拷贝一个 Page 对象。

因此,应该尽量减少默认 data 的大小,以及减少对象内的自定义属性

有图有真相:

以一个带有 100 种属性的 data 对象为测试用例,在 iPhone 6 上,页面的创建时间会因此增加 150ms。

4. 组件化方案

微信没有提供小程序的组件化方案(相信一定在实现中)。但开谈不说组件化,写再多代码也枉然。这里演示一个简单的组件化实现。

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

其中,P() 函数是自定义的基类。这是一个非常有用的东西,可以把所有通用的逻辑都写在基类里面,包括 PV 统计,来源统计,扩展生命周期函数,实现组件化等。

函数第一个参数是页面名称,作为页面的 key。第二个是 page 对象,其中扩展了一个 comps 数组,里面就是所有要加载的组件。

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

组件的定义跟一个普通 Page 对象一模一样,有 data 属性,以及 onLoadonShow 等事件,也有页面响应的回调方法。WXML 模板里定义的事件和 JS 事件一一对应。

基类做的事情,就是把这些组件对象的属性和方法复制到 Page 对象上(浅拷贝)。

其中 data 属性会 merge 到一起。而微信预定义的生命周期函数(包括自己扩展的),则封装成队列按序执行。

比如,当系统调用 onLoad 方法时,实际上是执行了所有组件的 onLoad 方法,最后再执行 PageonLoad

以上说的,都是逻辑层部分。至于 WXML 模板和 WXSS 部分,就要手工 import 过去了。

WXML:

WXSS:

5. 其他

虽然小程序已经足够小巧,但启动速度还是有那么 2-3 秒,无法做到秒开。我尝试对小程序的启动时间做优化,但没有找到多少有价值的优化点。

也许,这里面大部分时间,都消耗在了微信跟服务器通信的过程中。还是期待微信可以不断迭代优化。

原文地址:https://github.com/ysbcc/miniapp

往期精选文章

本文由知晓程序授权转载,关注微信号 zxcx0101,可获得以下内容和服务:

  • 在微信后台回复「1228」,获取全网首本《微信小程序入门指南》。
  • 在微信后台回复任意关键词,还能获得相关小程序推荐,赶紧试试吧!

原文发布于微信公众号 - 知晓程序(zxcx0101)

原文发表时间:2017-03-05

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏灯塔大数据

15 个 Android 通用流行框架大全

? 1 缓存 名称描述DiskLruCacheJava实现基于LRU的磁盘缓存 2 图片加载 名称描述Android Universal Image Lo...

2736
来自专栏天天

微信小程序中wv:html的方法

在微信小程序开发过程中,我们有没有遇到这种情况,数据接口返回的是字符串,字符串中还包含了普通html便签,例如:

1211
来自专栏腾讯NEXT学位

NativeScript和React Native对比

1460
来自专栏熊二哥

快速入门系列--MVC--07与HTML5移动开发的结合

    现在移动互联网的盛行,跨平台并兼容不同设备的HTML5越来越盛行,很多公司都在将自己过去的非HTML5网站应用渐进式的转化为HTML5应用,使得一套代码...

20310
来自专栏编程

ContentProvider使用方法详解

是四大组件之一,其本质上是一个标准化的数据管道,它屏蔽了底层的数据管理和服务等细节,以标准化的方式在 应用间共享数据。用户可以灵活实现所封装的数据存储以及增删改...

19510
来自专栏about云

扩展Yarn资源模型详解1

问题导读 1.countable资源是指哪些? 2.noncountable资源,本文列举了什么资源? 3.标签是否为资源? 4.如何实现扩展YARN资源模型...

2954
来自专栏视频咖

如何写出一手好的小程序代码,从架构说起

? 作为微信小程序底层 API 维护者之一,经历了风风雨雨、各种各样的吐槽。为了让大家能更好的写一手小程序,特地梳理一篇文章介绍。如果有什么吐槽的地方,欢迎去...

902
来自专栏假装我会写代码

基于 Laravel 的用户动态模块开发

1063
来自专栏技术之路

Qt5 新特性

Qt 5 已经临近发布,其最大的特点就是模块化。将原来庞大的模块更细分为不同的部分,同时,一个大版本的升级,当然少不了添加、删除各个功能类。文本简单介绍 Qt5...

2088
来自专栏IMWeb前端团队

Change Detection And Batch Update

本文作者:IMWeb 吴浩麟 原文出处:IMWeb社区 未经同意,禁止转载 前言 在传统的WEB开发中,当与用户或服务器发生交互时,需要我们手动获取数...

2087

扫码关注云+社区