百度智能小程序 頁面生命周期

原理圖

以下內(nèi)容詳細的描述了一個頁面被渲染的全過程：

1. FCP：First Contentful Paint ，即首次有內(nèi)容的繪制。
2. FMP：First Meaningful Paint ，即首次有意義的繪制。
   下列加載時間線屏幕截圖直觀的介紹了FCP與FMP的含義：

首頁初次渲染全過程

1. 初始化

渲染線程和邏輯線程同步的進行初始化，在邏輯線程初始化時收集 App 和 Page 的初始化數(shù)據(jù)，并且執(zhí)行 App.onLaunch 回調(diào)中的相關邏輯。此處我們以一個例子進行說明：

// app.js
App({
    globalData: 'init data',
    onLaunch(options) {
        this.globalData = 'onLaunch data';
    }
});

// /pages/index/index.js
Page({
    data: {
        title: 'Index',
        appData: getApp().globalData // onLaunch data
    }
})

初始化后邏輯線程收集到的 initData 如下：

{
    value: {
        title: 'Index',
        appData: 'onLaunch data'
    },
    otherMsg: ... // 其他信息
}

2. notify

當渲染線程初始化后，向邏輯線程派發(fā)消息，請求獲取初始化渲染數(shù)據(jù)。同時，如果開發(fā)者有配置骨架屏，小程序會優(yōu)先加載骨架屏，此時即為 FCP 完成。如果骨架屏的高度撐滿整個頁面，那么我們認為此時為 FMP 完成，如果骨架屏信息不足以撐滿整個屏幕，那么我們認為此次渲染非有效的 FMP。

2. setInitData

邏輯線程將初始化渲染數(shù)據(jù)派發(fā)給渲染線程，渲染進程拿到這些初始化數(shù)據(jù)后，會初始化頁面及自定義組件，最后將所有內(nèi)容渲染到頁面上。

3. setData

邏輯線程觸發(fā)以上生命周期后，邏輯層一般執(zhí)行了眾多的 setData，每次 setData 均會使得邏輯線程向渲染線程傳送數(shù)據(jù)，引起頁面的重新渲染。

其中首次的 setData，是在邏輯線程達到 Inited 狀態(tài)后，將業(yè)務相關的數(shù)據(jù)通過 setData 發(fā)送到渲染線程，觸發(fā)渲染線程 Rerender，并可以觸發(fā) FMP。

// 初始化時同步執(zhí)行
app onLaunch
// 收到 firstRender，并且客戶端派發(fā)onShow事件
-> app onShow
-> page onInit
-> cpnt created -> cpnt attached -> page onLoad
-> cpnt show    -> page onShow
-> cpnt ready   -> page onReady

cpnt 指一個自定義組件。