• 智能小程序的啟動流程
  • 1. 用戶點擊打開小程序
  • 2. 下載小程序包
  • 3. 啟動智能小程序框架
    • 3.1 初始化智能小程序框架邏輯層
    • 3.2 初始化智能小程序框架渲染層
  • 4. 執(zhí)行頁面級的生命周期

智能小程序的啟動流程

智能小程序的性能損耗主要發(fā)生在頁面數(shù)據(jù)的獲取及頁面渲染，下圖展示了用戶從入口點擊到首屏渲染的全流程：

創(chuàng)新互聯(lián)是一家專注于成都做網(wǎng)站、網(wǎng)站制作、成都外貿(mào)網(wǎng)站建設(shè)與策劃設(shè)計,碧江網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)十多年,網(wǎng)設(shè)計領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:碧江等地區(qū)。碧江做網(wǎng)站價格咨詢:18980820575

基于上圖描述的流程，我們接下來繼續(xù)展開，如何針對該流程的各個環(huán)節(jié)，采取針對性的優(yōu)化手段：

1. 用戶點擊打開小程序

此處是小程序加載的起點。

2. 下載小程序包

小程序在用戶第一次打開時會下載最新版本的小程序包。如果包體積過大，會導(dǎo)致下載時間增長。那么可以考慮使用分包能力，并減少不必要的動態(tài)庫和插件的使用。

我們將會在使用分包和合理使用動態(tài)庫章節(jié)介紹該流程的優(yōu)化方式。

3. 啟動智能小程序框架

此時邏輯層和渲染層開始同步初始化：

3.1 初始化智能小程序框架邏輯層

1. 加載動態(tài)庫和插件：動態(tài)庫和插件提供了擴展小程序能力的機制。因為其加載方式是串行的，所以如果引用了不合適的動態(tài)庫和插件，會導(dǎo)致一定程度性能退化。開發(fā)者需要平衡功能和性能的關(guān)系，合理使用動態(tài)庫章節(jié)將會詳細(xì)介紹該流程的優(yōu)化方式。

2. 加載邏輯代碼：邏輯代碼指的是App、頁面、自定義組件和使用的其他模塊的js模塊的集合。如果邏輯代碼體積過大會影響邏輯層的啟動速度。因此開發(fā)者需要考慮按需加載模塊，減少代碼體積。

3. 執(zhí)行onLaunch：加載完必要的資源后，智能小程序框架會執(zhí)行App.onLaunch相關(guān)回調(diào)。如果App.onLaunch中執(zhí)行過多同步阻塞式的邏輯，會導(dǎo)致后續(xù)流程阻塞，影響邏輯層啟動速度。合理使用 App.onLaunch章節(jié)將會詳細(xì)介紹該流程的優(yōu)化方式。

完成加載動態(tài)庫和插件、加載邏輯代碼和執(zhí)行onLaunch后，智能小程序框架邏輯層會收集initData（渲染層進(jìn)行頁面繪制的必要信息，包含了小程序App、頁面和自定義組件的初始數(shù)據(jù)）。initData收集的早晚是衡量邏輯層性能的關(guān)鍵點。

3.2 初始化智能小程序框架渲染層

1. 加載模板和樣式文件：包含app.css、page.css和page.swan等相關(guān)文件。這些文件一般較小，對整體性能影響不大。

2. 加載SJS：SJS是智能小程序的一套自定義腳本語言。SJS會產(chǎn)生額外的加載邏輯，對性能影響較大，建議僅在必要情況下使用此能力，提升啟動性能。

3. 加載當(dāng)前頁面所有使用到的自定義組件：此處使用到的自定義組件包括插件和動庫中使用的組件，如果頁面使用到的自定義組件較少，那么可以慮直接將邏輯寫入頁面模板中，并且酌情使用插件和動態(tài)庫，我們在合理使用自定義組件章節(jié)介紹了該流程的優(yōu)化。

完成模板和樣式文件、SJS和當(dāng)前頁面所有使用到的自定義組件加載后，智能小程序框架渲染層初始化完成。如果邏輯層初始化相對渲染層較慢，那么就是渲染層等待initData到達(dá)；反之則是initData到達(dá)后，等待渲染層初始化完成。

智能小程序框架完成初始化后，會觸發(fā)首次內(nèi)容繪制。

4. 執(zhí)行頁面級的生命周期

首次內(nèi)容繪制完成后，渲染層向邏輯層發(fā)送firstRendered事件，邏輯層開始執(zhí)行生命周期。以生命周期中頁面onLoad為例，假設(shè)開發(fā)者在onLoad中請求頁面主數(shù)據(jù)（小程序希望首屏展示給用戶的數(shù)據(jù)）。為了加速主數(shù)據(jù)的請求速度，可以使用onInit生命周期，提前請求主數(shù)據(jù)。在onInit請求首屏主數(shù)據(jù)章節(jié)將介紹如何優(yōu)化小程序主數(shù)據(jù)請求。

完成以上所有流程后，會觸發(fā)首次有意義的渲染。

網(wǎng)站欄目：創(chuàng)新互聯(lián)百度小程序教程：智能小程序的啟動流程
文章路徑：http://www.5511xx.com/article/djcjhsi.html