微信小程序生命周期与关键性能指标

本文将介绍微信小程序整个App的生命周期、单个页面的生命周期和组件的生命周期，并研究了这三个元素生命周期的关系，这在学习和开发过程中对理解小程序运行机制有重要意义。最终，由生命周期整理出小程序的关键指标，仅供参考。

App的生命周期

在app.js中有其生命周期相关的三个方法：onLaunch、onShow和onHide。

首先是onLaunch，这是整个小程序的第一个生命周期回调函数，在小程序初始化完成后调用。

接着，小程序将触发onShow事件，如果小程序从后台切回前台后也会触发该事件。

最后，是小程序切到后台的事件onHide。

Page的生命周期

在每个页面注册函数Page()的参数中，有生命周期的方法：onLoad、onShow、onReady、onHide、onUnload。

页面触发的第一个生命周期回调是onLoad，在页面加载的时候触发，其参数是页面的query参数，一个页面只有一次；

接着是onShow，监听页面的显示，与onLoad不同，如果页面被隐藏后再次显示（例如：进入下一页后返回），也会触发该生命周期；

触发onShow之后，逻辑层会向渲染层发送初始化数据，渲染层完成第一次渲染之后，会通知逻辑层触发onReady生命周期，一个页面只有一次；

onHide是页面隐藏但未卸载的时候触发的，如 wx.navigateTo 或底部tab切换到其他页面，小程序切入后台等。

onUnload是页面卸载时触发，如wx.redirectTo或wx.navigateBack到其他页面时。

Component的生命周期

组件最重要的生命周期是created、attached、detached ，包含一个组件实例生命流程的最主要时间点。

首先，当组件实例刚被创建时， created生命周期被触发。此时，还不能调用setData 。 通常情况下，这个生命周期只应该用于给组件this添加一些自定义属性字段。

接着，在组件完全初始化完毕并且进入页面节点树后， attached生命周期被触发。此时， this.data 已被初始化为组件的当前值，绝大多数初始化工作可以在这个时机进行。

在组件离开页面节点树后， detached生命周期被触发。退出一个页面时，如果组件还在页面节点树中，则 detached 会被触发。

此外，组件生命周期还有ready和move生命周期，分别在视图层布局完成和组件实例被移动到节点树另一个位置时执行。

整体周期

现在我们知道了App、Page、和Component分别的生命周期顺序，那么他们之间的生命周期顺序又是如何？通过开发一个简单的demo，观察运行结果，可以得到如下结论：

打开页面的情况

首先，前一个页面隐藏，在加载下一个页面之前，需要先初始化新页面的组件。页面首次渲染之后，会触发组件的ready，最后触发的是页面的onReady，如下图：

从PageA打开pageB时的生命周期顺序

离开页面的情况

离开当前页面时，首先触发当前页面的卸载onUnload，接着是组件离开节点树的detached。最后显示之前的页面，触发onShow。如下图：

从PageB返回到PageA的生命周期顺序

打开App的情况

App、Page与Component生命周期运行顺序，先从App加载然后再加载Page，在加载Page之前会先初始化该页面所用的所有组件，之后才触发页面的onLoad生命周期，如下图：

打开App时的生命周期顺序

切换到后台

切换到后台时，小程序和页面并没有卸载，只会触发隐藏。先触发页面的onHide，接着是App的onHide。如下图：

切换到后台时的生命周期顺序

切换到前台

切换到后台时，小程序会先触发onShow，之后才是页面的onShow。如下图：

切换到前台时的生命周期顺序

关键性能指标

了解了小程序各个阶段的生命周期，我们可以制定出关键节点的性能指标，整理如下表：

维度	指标	含义
App	小程序打开时间	firstPage.onLoad - onLaunch
	打开首页显示时间	firstPage.onReady - onLaunch
页面	首次渲染时间	page.onReady - page.onLoad
	可交互时间（首屏时间）	首屏相关模块最后一次setData的时间点 - page.onLoad
	接口请求时间	请求返回时间 - 请求发送时间

参考文档

• 官方文档 Page：https://developers.weixin.qq....
• 官方文档 App：https://developers.weixin.qq....
• 官方文档 页面生命周期：https://developers.weixin.qq....
• 官方文档 组件生命周期：https://developers.weixin.qq....