微信小程序生命週期與性能指標

本文將介紹微信小程序整個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。以下圖：

切換到前臺時的生命週期順序

關鍵性能指標

瞭解了小程序各個階段的生命週期，咱們能夠制定出關鍵節點的性能指標，整理以下表：

參考文檔

1. 官方文檔 Page：developers.weixin.qq.com/miniprogram…

2. 官方文檔 App：developers.weixin.qq.com/miniprogram…

3. 官方文檔 頁面生命週期：developers.weixin.qq.com/miniprogram…

4. 官方文檔 組件生命週期：developers.weixin.qq.com/miniprogram…