頁面生命周期

原理圖

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

在四子王等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強(qiáng)發(fā)展的系統(tǒng)性、市場前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè) 網(wǎng)站設(shè)計(jì)制作按需搭建網(wǎng)站,公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),成都品牌網(wǎng)站建設(shè),成都全網(wǎng)營銷,外貿(mào)營銷網(wǎng)站建設(shè),四子王網(wǎng)站建設(shè)費(fèi)用合理。

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

首頁初次渲染全過程

1. 初始化

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

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

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

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

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

2. notify

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

2. setInitData

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

3. setData

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

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

 
 
   
  
  // 初始化時(shí)同步執(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 指一個(gè)自定義組件。

網(wǎng)頁標(biāo)題：創(chuàng)新互聯(lián)百度小程序教程：頁面生命周期
文章鏈接：http://fisionsoft.com.cn/article/cdjijds.html

新聞中心