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

智能小程序的啟動(dòng)流程

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

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

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

1. 用戶點(diǎn)擊打開小程序

此處是小程序加載的起點(diǎn)。

2. 下載小程序包

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

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

3. 啟動(dòng)智能小程序框架

此時(shí)邏輯層和渲染層開始同步初始化：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

網(wǎng)站題目：創(chuàng)新互聯(lián)百度小程序教程：智能小程序的啟動(dòng)流程
網(wǎng)頁(yè)URL：http://www.dlmjj.cn/article/djcjhsi.html