今天給大(dà)家(jiā)講的(de)題目是(shì)《百度開(kāi)源小( ‍£xiǎo)程序框架架構演進和(hé)性能(néng)優化(huà)實踐》。本次分(fēn)享包含兩∏¥部分(fēn)，第一(yī)部分(fēn)是(shì)百度智能(néng)小(xiǎo)程±§序整體(tǐ)的(de)框架及演進，主要(yào)講百度小(xiǎo)程∞α₹✘序開(kāi)發全流程概況、百度智能(néng)小(xiǎo)程序框架，以及γε百度小(xiǎo)程序多(duō)宿主運行(xíng)保障；第二部分(fēn)是(shì)百度←π小(xiǎo)程序框架的(de)性能(néng)優化(huà)，主要©↔₽₩(yào)講整個(gè)小(xiǎo)程序的(de)啓動過程，以及從(cóng)開(kāi)發•ε者角度，有(yǒu)哪些(xiē)重要(yào)的(de)優化(huà)↔♦Ω點。

百度智能(néng)小(xiǎo)程序整體(tǐ)框架及演進

整個(gè)移動互聯網一(yī)直是(shì)在 NA 和(hé) H5 之間(jiān)←'₽¶尋找權衡，NA 的(de)性能(néng)好(hǎo)、能(néng)力強；H5 靈活性更高(g<&āo)。我認為(wèi)渲染分(fēn)為(wèi)兩派，一(yī→€>δ)派就(jiù)是(shì) NA 渲染派，一(yī)派叫β​§α做(zuò) H5 渲染派。

• NA 渲染派，比較有(yǒu)代表性的(de)如(rú) RN↕λ、Flutter；

• Web 渲染派，比如(rú)百度的(de)輕應用(yòng)，以及之後做(zuò)的(de)小(x≤₽iǎo)程序。

1. 開(kāi)發全流程概覽

百度曾經做(zuò)過的(de) Web 渲染派的(de&γ♠)三個(gè)代表産品，分(fēn)别是(shì)輕應用(yòng)、直達号和(hé)≈₩小(xiǎo)程序。

• 輕應用(yòng)，是(shì) H5 + 端能(néng)力。它是(shì)一∑±₹(yī)個(gè)标準的(de) H5，增加了(le)一(yī)些(xiē) NA&§$ 的(de) API，比如(rú)定位等。

• 直達号，在技(jì)術(shù)層面跟輕應用(yòng)₹✘γ£是(shì)一(yī)樣的(de)。

• 小(xiǎo)程序，本質上(shàng)是(shì)一(yī≈✘↕α)個(gè)受限的(de) H5 + 大(dà)量豐富的(deδ±>) API + UI 組件(jiàn)。現(xiàn)在我們給小(xiǎo)程序提供的(de) A↓$PI 有(yǒu) 300 多(duō)個(gè)，組件(jiàn)有(yǒu) 뮥30 多(duō)個(gè)，組件(jiàn)是(shì)有(yǒu)界面的(de)。比如(rβ≤​ú)，視(shì)頻(pín)、地(dì)圖 。

為(wèi)什(shén)麽小(xiǎo)程序要(yào)受限α↑Ω ，主要(yào)有(yǒu)兩個(gè)原因：

• 保持體(tǐ)驗的(de)一(yī)緻性。H5 太過靈活，JS 随時(sh←✘í)可(kě)以去(qù)改變界面。

• 安全考慮。因為(wèi)我們提供了(le)大(dà)量 API 和(hé)組件(jià ε✘'n)，且這(zhè)些(xiē)都(dōu)是(shì)很(hěn)底層的(de)一(yī)些(x >iē)能(néng)力，比如(rú)電(diàn)話(huà)号碼、賬号，肯定不(bù)能δ©(néng)輕易開(kāi)放(fàng)給大(dà)家(jiā)。

怎麽受限，主要(yào)有(yǒu)兩點：

• 編寫語言，不(bù)再是(shì)直接寫 HTML ，而是(shì)用(yòng)自(z"♦→σì)定義語言 swan 來(lái)編寫 。

• runtime 層有(yǒu)兩個(gè)棧，一(yī)個(g™∏φ↑è)是(shì)渲染棧，一(yī)個(gè)是(shì) JS 執行(xíng)αδ★棧，這(zhè)兩個(gè)棧從(cóng)物(wù)§®理(lǐ)上(shàng)隔離(lí)，以保障安全性。

2. 智能(néng)小(xiǎo)程序框架

（1）開(kāi)發運行(xíng)全流程

先簡單介紹一(yī)下(xià)整個(gè)百度智能(n• ∏éng)小(xiǎo)程序的(de)開(kāi)發流程。

• 首先開(kāi)發者用(yòng) swan 寫布局；

• 接著(zhe)通(tōng)過開(kāi)發者工(gōng)具打包，上(shàγ≈≥ng)傳到(dào)我們的(de)小(xiǎo)程序 B 端服務器(qì)；

• 然後是(shì)小(xiǎo)程序的(de)審核流程，有₩♣✔δ(yǒu)機(jī)審、人(rén)審；

• 最後是(shì)用(yòng)戶點擊小(xiǎo)程序時←α©(shí)，客戶端請(qǐng)求小(xiǎo)程序 C 端服務器(<₹✔↓qì)，C 端服務器(qì)再從(cóng) B 端服務器(qì)獲±≈¶取小(xiǎo)程序包。整個(gè)過程都(dōu)是(shì)$ 加密傳輸，可(kě)以保證代碼的(de)安全。

（2）百度智能(néng)小(xiǎo)程序框架 -SWAN

上(shàng)圖是(shì)一(yī)個(gè)百度智能(néφ¶φπng)小(xiǎo)程序的(de)框架，我們內(nèi)部命• α¶名為(wèi) SWAN。

分(fēn)層結構如(rú)下(xià)：

• 最上(shàng)層是(shì)開(kāi)發者基礎庫® >，命名為(wèi) swan-js ，開(kāi)發者直接和(hé)這(zhè)層打交≠©道(dào)。swan-js 負責兩件(jiàn)事(sh≠←ì)情：（1）swan 代碼轉為(wèi) HTML，變成 WebView 可(kě)★∞運行(xíng)程序；（2）客戶端端能(néng)力的(de)封裝暴露。

• 再下(xià)一(yī)層是(shì) swan-native。這(zhè)裡(l γ✔☆ǐ)面最核心的(de)是(shì) API 和(hé)組件(jiàn)的(dφ≥e) NA 實現(xiàn)。其中雙棧管理(lǐ)也(yě)在這(zhè)一(yī)↑ &層，另外(wài)标紅(hóng)的(de) Extension 用(yòng)于開(kāi)π♠發者宿主自(zì)身(shēn)能(néng)力擴展使用®'(yòng)，比如(rú)，貼吧(ba)宿主期望增加個(gè)發帖能(néng)力，就(j↕>£ iù)可(kě)以通(tōng)過此機(jī)制(zhì)。

• 再下(xià)面這(zhè)層叫 Porting Layer。這(zhè)層是(shì↕ )百度小(xiǎo)程序為(wèi)了(le)實現(xiàn)開(kāi)£€←源，增加的(de)一(yī)層與宿主的(de)接口層。

• 最下(xià)面這(zhè)一(yī)層是(shì)宿主基礎能(néng)力層。如(r✘↓λ↕ú)果宿主沒有(yǒu)這(zhè)些(xiē)能(néng)力，可(kě)≠α↓‌以參考百度開(kāi)源的(de)參考實現(xiàn)，可(kě)直接集成到(dào)宿主使用(y‌∞εòng)。

3. 核心結構

（1）前端角度

我們從(cóng)前端的(de)視(shì)角來(lái)看(kàn)看(kàn)雙棧結構。一Ω₩(yī)個(gè)宿主客戶端可(kě)以運行(xíng)多(duō)個(gè)小(xiǎoβ±δ)程序，并且在一(yī)段時(shí)間(jiān)內(nèi)保持存ε ε活狀态，每個(gè)小(xiǎo)程序都(dōu)有(yǒu)一(y ₽ī)個(gè) master 執行(xíng)框架  •JS 和(hé)小(xiǎo)程序開(kāi)發者的(de) JS，一(yī)個(gè) maπ±$ster 對(duì)應多(duō)個(gè) slave（s♠σ♠₹lave 代表一(yī)個(gè)用(yòng)戶可(kě)見(jiàn∞§)的(de)界面）。

（2）客戶端角度

從(cóng)客戶端角度來(lái)看(kàn)雙棧結構，如(rú)"®"•上(shàng)圖所示，master 負責執行(xíng) JS，可(kě)以有(yǒu)兩種 ©實現(xiàn)方式，WebView 或 JS 引擎（¥₩V8/jscore），JS 引擎的(de)效率更高(gāo)；slave 的(de)展現(xα‍£←iàn)有(yǒu) WebView，為(wèi)了(le)加快(k≠≥uài) WebView 的(de)創建速度，設置 cache；master 和(hé) ∏₹εslave 的(de)通(tōng)信通(tōng)過消息總線。

master 不(bù)支持 BOM、DOM 和(hé) WEB-API，小(xiǎo)程β∑序隻能(néng)調用(yòng)對(duì)外(wài)開(kāi)放(fàng™")的(de)能(néng)力。

（3）小(xiǎo)程序 NA 組件(jiàn)與界面關系

從(cóng)體(tǐ)驗上(shàng)看(kàn)，小(xiǎo)程序的(de)體(tǐ)驗®™σ要(yào)好(hǎo)于 H5，其中有(yǒu)一(yī)點就(jiù)是(s∞≥±hì)小(xiǎo)程序會(huì)把一(yī)些(xiē) NA 的(de)能ε★(néng)力和(hé) UI 融合到(dào)小(xiǎo)程序裡(lǐ≠≤)面去(qù)。小(xiǎo)程序的(de)主體(tǐ)渲染還(h←≈$ái)是(shì)基于 H5 技(jì)術(shù)，接下(xià)來(lái)我們講&←一(yī)下(xià) NA 元素如(rú)何融入 UI 界面。

NA 元素與 H5 的(de)關系有(yǒu)兩種，貼片關系、同層關系。

• 貼片關系：NA 元素在 H5 不(bù)在同一(yī)層，NA 浮在 H5 之上(s↓×'↔hàng)，H5 所有(yǒu)元素都(dōu)不(£βbù)可(kě)以放(fàng)到(dào) NA 元素之上<Ω(shàng)。因為(wèi)不(bù)在一(yī)層，就(jiù)∞$σ©需要(yào)處理(lǐ)滾動聯動，當檢測到(dào) WebView ←δ£滾動 n 個(gè)像素， NA 元素也(yě)需要(yào)滾動 n 個(gè)像<₹Ω素。

• 同層關系：NA 元素在 H5 這(zhè)一(yī)σσ∑♠層，H5 的(de)原生(shēng)可(kě)以壓在 NA 元素之上(shàng)。

貼片、同層的(de)界面層級樹(shù)如(rú)上(shàng)。

我們舉一(yī)個(gè)視(shì)頻(pín)組件(jià ™πn)同層的(de)例子(zǐ)。視(shì)頻(pín)∏↓♥組件(jiàn)比較複雜(zá)，有(yǒu) 4 層。第 1 層是(shì)視(shì)頻αε↔$(pín)層，即原始視(shì)頻(pín)的(de)★©圖像，第 2 層是(shì)彈幕層，第 3 層是(shì)用(yòn&→g)于視(shì)頻(pín)控制(zhì)的(de)控件(jiàn)層（比 ± <如(rú)，開(kāi)始、暫停按鍵），第 4 層 Slot 層，視(shì)頻(pínβ←←↔)上(shàng)面漂的(de) H5 元素将被放(fàngπ↓<)到(dào)這(zhè)層。

同層處理(lǐ)機(jī)制(zhì)，先在 H5（開(kāi)發者寫的(de) swa∞™n 會(huì)被轉為(wèi) H5） 上(shàng<≤)打一(yī)個(gè)特殊的(de)标記先占位，屬性 inline；浏覽內(nèi)核<β把這(zhè)個(gè)區(qū)域的(de) surface 拿₽→→✘(ná)出來(lái)給到(dào) NA 層，然後，小(xiǎo)程序框架會(huì)把這(₹↑ ✘zhè)個(gè)區(qū)域 surface 塞給•&播放(fàng)器(qì)，讓播放(fàng)器(qì)直÷​'接在 surface 上(shàng)面繪制(zhì)，達到(d♥'₹ào)同層。上(shàng)面的(de)彈幕、控件(jiàn)、Slot，都(dōu)是(₽↕ ÷shì) swanjs 層 H5 實現(xiàn) ，Slot 層可(kě)以認為(wèi)是‍→ ∞(shì)一(yī)個(gè)容器(qì)，例如(rú)寫一(yī)個(gè) video，其所γ®γ§有(yǒu)的(de)子(zǐ)元素都(dōu)會(huì)放(fàng)在 Slot。

NA 的(de)組件(jiàn)同層的(de)技(jì)術(shù)方案還(hái<>)不(bù)太一(yī)樣，安卓和(hé) iOS ​φε也(yě)是(shì)有(yǒu)些(xiē)區(qū)别的(de)。像在 iOS≤× 上(shàng)，如(rú)果有(yǒu)些(xiē)組件(jiàn)設置 ©♠over-flow ，它會(huì)天然支持這(zhè)一(yī)套東(d₹γ♦&ōng)西(xī)，但(dàn)是(shì)安卓就(jiù)需要(yào)浏覽器(qì)內ε∑∏(nèi)核來(lái)支持。

4. 小(xiǎo)程序多(duō)宿主運行(xíng)保障

百度智能(néng)小(xiǎo)程序是(shì)開(kāi)放(fàng)系統，可(kě)以運$§±行(xíng)在多(duō)宿主之上(shàng)，那(nà)如☆₩$♥(rú)何在多(duō)宿主上(shàng)保證小(xiǎo)程序運行(xíng)¥ 體(tǐ)驗的(de)一(yī)緻性呢(ne)？

各個(gè)宿主集成了(le)我們的(de)小(xiǎo)程序框架後，首先要(yào)跑↕φ CTS 測試，通(tōng)過之後才可(kě)以拿(ná)到(dào)小(xiǎo)程"ε©序列表進行(xíng)分(fēn)發。

對(duì)于可(kě)選能(néng)力部分(fēn)≠ ，各個(gè)宿主不(bù)是(shì)所有(yǒu)的(de)能(néng)力都(dōu‌ α∑)需要(yào)實現(xiàn)。比如(rú)，一(yī)些™♥(xiē) AI 能(néng)力、push 能(néng)力。

如(rú)果一(yī)個(gè)小(xiǎo)程序用₹₽(yòng)到(dào)了(le)可(kě)選能(nén↔←×♥g)力怎麽辦？

兩個(gè)辦法，一(yī)是(shì)小(xiǎo)程序和(hé)宿主之間(jiān)的(dγ€×∞e)雙向選擇機(jī)制(zhì)，小(xiǎo)程序¶∞±¶可(kě)以選擇我要(yào)分(fēn)發到(dào)哪些(xiē)平台，€✘宿主也(yě)有(yǒu)權利選擇要(yào)分(fēn)發到(dào)哪些(xi★≠✘ē)宿主。二是(shì)，小(xiǎo)程序做(zuò)兼容。

上(shàng)圖所示，标紅(hóng)的(de)是(shì) Extens≤↔¥♥ion 機(jī)制(zhì)，當宿主有(yǒu)一(yī)些(xiē)定制(zhì)化(→<​huà)的(de)要(yào)求時(shí)，可(kě)以使用∏≤£®(yòng)此機(jī)制(zhì)。作(zuò)為(wèi)宿主，需要(yào)£σ做(zuò)兩件(jiàn)事(shì)情，一(yī)是(shì)在 JS 層需要(yà♠✔®o)寫一(yī)套接口。二是(shì)在 Porting Layer 接口實現(xiàn<♣∞≈)層實現(xiàn)一(yī)套能(néng)力。如(rú)果宿主覺得(de)這(z ♥hè)個(gè)能(néng)力是(shì)通(tōng)用(yòng)的(de)，可(k "♠βě)以反饋提案，審核通(tōng)過後，百度小(xiǎo)程序團隊會(huì)将提案合并到(dà★​≥o)開(kāi)源框架裡(lǐ)。

5. 章(zhāng)節小(xiǎo)結

百度智能(néng)小(xiǎo)程序框架性能(néng)優化(​ ≤huà)實踐

首先從(cóng)用(yòng)戶視(shì)角看(kàn)看(kàn)一(yī)個(g∑λè)小(xiǎo)程序的(de)加載過程。

1. 百度智能(néng)小(xiǎo)程序加載分(fēn)₩↓≠δ階段過程

拿(ná)微(wēi)博舉例，如(rú)上(shàng)圖所示。

• 首先小(xiǎo)程序被啓動後，先是(shì)一(yī)個(gè) L∞$×oading 的(de)過程，上(shàng)面的(de) ©π•title 和(hé)下(xià)面的(de) ta∏>←b（框架 NA 實現(xiàn)）顯示出來(lái)。

• 第二張圖片我們定義為(wèi) FP（First Paint ）階段。

• 第三張圖下(xià)面有(yǒu)搜索框了(le)，這(zhè)其¶€實是(shì)小(xiǎo)程序包裡(lǐ)面的(de)內(nèi)容。 ♦♣✔它是(shì)通(tōng)過 initdate 接口初‌☆始化(huà)渲染出來(lái)的(de)，此階段我們定義♥£φβ為(wèi) FCP（ First Contentfull P<©ε♣aint ）階段。

• 第四張圖，是(shì)小(xiǎo)程序從(cóng)網上(shàng)拉到↓¶(dào)了(le)實時(shí)的(de)內(nèi)容，然後 •÷更新到(dào)界面，我們将其定義為(wèi) FMP（First M♣βeaningful Paint） 階段。

• 最後一(yī)張圖，所有(yǒu)的(de)元素都(dōu)已經拉$€λ下(xià)來(lái)并展示了(le)，用(yòng)戶可(kě)以操作(✘★zuò)任何一(yī)個(gè)位置，我們将其定義為(wèi) TTI (Timε< ≠e to Interative) 階段。

2. 百度智能(néng)小(xiǎo)程序

（1）性能(néng)基線

百度小(xiǎo)程序在 2019 年(nián)底建立了(le) FMPασ‌β 指标，它在開(kāi)發者平台展示的(de)名字為(wèi)“上(shàng)屏時(shí'δ↔€)間(jiān)”。

我們統計(jì)了(le)線上(shàng)的(de)一(yī)個(g₽✘è) 80 分(fēn)位點，耗時(shí)是(shì) 1.9sε♦±β。(什(shén)麽是(shì) 80 分(fēn)位點？比如(rú)，有(yǒu"≠) 100 個(gè)請(qǐng)求過來(lái)了(le)，然後我們把&α 請(qǐng)求的(de)耗時(shí)排序，第 80 個(gè)≈✘→≈請(qǐng)求的(de)耗時(shí)，我們就(jiù)認≈®×為(wèi)是(shì) 80 分(fēn)位點。)

（2）性能(néng)曆史曲線

如(rú)上(shàng)圖所示， 2019 年(nián)百度小(xiǎo)‍↓→€程序性能(néng)優化(huà)的(de)曆史曲線。FP$∞< 框架層從(cóng)接近(jìn) 3s 一(yī)直∞ 優化(huà)了(le)現(xiàn)在的(de) 1.1s >">左右。百度小(xiǎo)程序的(de)目标是(shì)讓小(xiǎo)程"✘序無線接近(jìn) NA 體(tǐ)驗。

3. 啓動流程

接下(xià)來(lái)，我們從(cóng)開(kāi)發者角度看(®​kàn)，還(hái)能(néng)優化(huà)什(shén)麽？我們先看(kàn)一(yī ±α•)下(xià)啓動流程，所有(yǒu)的(de)啓動邏輯簡單♦↔≥↔串行(xíng)羅列（實際是(shì)有(yǒu)一÷ε(yī)些(xiē)步奏是(shì)并行(xíng)的(de)）。

4. 性能(néng)優化(huà)

開(kāi)發者能(néng)夠做(zuò)的(de)性能(néng)優化(huà)主要(yào¶"₹)有(yǒu)兩部分(fēn)。一(yī)是(shì)小(xiǎo)程序包∞π₩±的(de)體(tǐ)積，二是(shì)業(yè)務數(shù)據。接下(xià)來(lái<×>↔)，我用(yòng)三點來(lái)說(shuō)明↑φ""(míng)開(kāi)發者可(kě)以做(zuò)什(shén)麽。

（1）包體(tǐ)積優化(huà)

建議(yì)包體(tǐ)積保持在 1M 以內(nèi)，為(wèi)什λ&☆(shén)麽呢(ne)？

因為(wèi)我們統計(jì)了(le)一(yī)下(xià)，如(rú± )果打開(kāi)當次需要(yào)下(xià)載包，則這(zhè)次的(de)啓動時σ←(shí)長(cháng)會(huì)占到(dào)我們整個(gè)時(shí)長(ch§£π₽áng)的(de) 60%。1M 的(de)包，80 分(f≤ ♣÷ēn)位速度需要(yào) 1s+ 才能(néng)下(xià)載完成。☆®✔‌所以要(yào)控制(zhì)自(zì)己的(de)包的(de)體(tǐ)積。而且♦♣我們現(xiàn)在還(hái)隻是(shì)看(kàn) 80 分(fēn)位，當我們拉到(dà✘♣♥o) 90 分(fēn)位，99 分(fēn)位，這(zhè)個(gè)是(sσα♠hì)一(yī)個(gè)非常陡的(de)曲線，惡化(huà)很(hěn)嚴重。

包體(tǐ)優化(huà)機(jī)制(zhì)有(yǒu)兩個(gè)技(jì)術(shù)：一(yī)α↕​©是(shì)分(fēn)包技(jì)術(shù)和(hé)獨立分(fēn)包技(jì)術(s♦∑>hù)，二是(shì)資源壓縮。

• 分(fēn)包技(jì)術(shù) & 獨€€€立分(fēn)包技(jì)術(shù)

• 分(fēn)包技(jì)術(shù)

一(yī)個(gè)小(xiǎo)程序有(yǒu)很(hěn)多(duō)頁面，但(dànπα←)不(bù)是(shì)所有(yǒu)的(de)頁面都(dōu)是(shì±← ↕)高(gāo) PV 頁面。很(hěn)多(duō)頁面是(shì)用(yò→♦ng)戶很(hěn)少(shǎo)點到(dào)的(de)，可(kě)以把這(zhè)些₽•>∞(xiē)頁面放(fàng)到(dào)我們的(de)分(♣₩fēn)包去(qù)，主包放(fàng)我們高(gāo) PV 的(de)頁♣₽ 面。

分(fēn)包不(bù)能(néng)夠獨立運行(xíng)，比如(rú)≠>，從(cóng)搜索 feed 分(fēn)發過去(qù)，它運行(xíng)時(shí)​©需要(yào)把我們主包下(xià)載下(xià)來(lái)↔​±，但(dàn)是(shì)因為(wèi)它的(de)概率低(dī)&σ，不(bù)會(huì)影(yǐng)響絕大(dà)£☆¶₩多(duō)數(shù)情況。簡而言之，就(jiù)是(shì)用(yòng)分(fēn)包技‍Ω‌(jì)術(shù)把非關鍵的(de)頁面剝離(lí)出✔&去(qù)。

用(yòng)分(fēn)包技(jì)術(shù)把非 ∞關鍵的(de)頁面剝離(lí)出去(qù)之後小(xiǎo)程序包的(de)體×α(tǐ)積還(hái)是(shì)大(dà)的(de)話(huà)→✘✘★怎麽辦？

• 獨立分(fēn)包技(jì)術(shù)

所謂獨立，就(jiù)是(shì)說(shuō)下(xià)載完這(zhè♣→✔)個(gè)包之後就(jiù)可(kě)以運行(xíng)，無需✔∏₩下(xià)載主包。此時(shí)的(de)主包和(hé)獨立分(fēn)包♣& 的(de)區(qū)别就(jiù)是(shì)，小(xiǎo)程序總要(yào★£™)有(yǒu)一(yī)個(gè)入口，這(zhè)個(gè)入口的(de)獨立分(fēn​π¥)包，我們就(jiù)命名為(wèi)主包。

通(tōng)過這(zhè)兩項技(jì)術(shù)來(lái)減小(xiǎoε&)我們的(de)包體(tǐ)大(dà)小(xiǎo)，将其保持在在 1M 以內(nèi) ♣←。

• 資源壓縮

我們分(fēn)析過一(yī)些(xiē)小(xiǎo)程序，發現(xπφ£iàn)有(yǒu)的(de)包體(tǐ)裡(lǐ)包含 PC 圖片，這(zhè)無疑增加了(le↔♥)包的(de)體(tǐ)積。建議(yì)如(rú)下(xià)：

• 把圖片放(fàng)到(dào)服務器(qì)，不(bù)要(yà' ♥≥o)放(fàng)在包裡(lǐ)面。

• 壓縮圖片體(tǐ)積，比如(rú)，把 png 改為(wèi) jpeg 格£§式這(zhè)樣體(tǐ)積可(kě)以減少(shǎo) 90%↑§（不(bù)考慮透明(míng)度情況）。

• 剔除無用(yòng)資源。

App-js 需要(yào)通(tōng)過分(fēn)包來(lái)解決，最終我​♦們要(yào)達到(dào)什(shén)麽目标？

• 單個(gè)包控制(zhì)在 1M 以內(nèi)。

• 文(wén)件(jiàn)數(shù)控制(zhì)在 200 個(gè)以內(n₽∑èi)。

(2) 數(shù)據拉取

數(shù)據拉取的(de)目的(de)是(shì)快(kuài)速讓界面§£有(yǒu)內(nèi)容，減少(shǎo)用(yòng)戶的(de)白(bái)屏時(shí)₽↕間(jiān)。即使用(yòng)戶是(shì)斷網的(de)，也(yě)給他(tā)離φ↔±∞(lí)線緩存一(yī)些(xiē)數(shù)據。

如(rú)上(shàng)圖所示，這(zhè)裡(lǐ)面提到(dào)了(le)業(y‍¶è)務骨架屏和(hé)框架骨架屏。現(xiàn)在很(hěn)多(duō)小(xiǎ₩≥o)程序都(dōu)會(huì)參考 H5 的(de)實現(xiàn)，把 δ✔♦±H5 的(de)漸進式加載骨架屏用(yòng)到(dào)我們的(de)小(xiǎo)程序裡(lǐ♥​©)面，用(yòng)了(le)這(zhè)種技(jì)術(shù)之後，反而會&★(huì)讓真實的(de)內(nèi)容展示的(de)速度變慢(γ±màn)，我們統計(jì)大(dà)概有(yǒu) 300ms 延遲。

為(wèi)了(le)解決骨架屏導緻的(de)內(nèi)容展示延遲，我們做(zuò)了(l←∑e)一(yī)套框架層的(de)骨架屏機(jī)制(zhì)。按照(zhào)我們這(zhè✔¶§₩)個(gè)機(jī)制(zhì)來(lái)實現(xiàn)骨架屏，對(duì'∞)性能(néng)的(de)影(yǐng)響就(jiù)會(huì)大(dà)大(¶±±dà)減少(shǎo)。策略上(shàng)就(jiù)是(s Ω₽€hì)在 master 做(zuò) appjs 執δ ♦φ行(xíng)時(shí)，就(jiù)讓 slave 加載框架骨架屏，并行(xíng)執行(xí∏α ®ng)。

自(zì)己寫的(de)業(yè)務骨架屏，它什(s∑σhén)麽時(shí)候才展示？如(rú)上(shàng)圖所示，當你↔★≠(nǐ)把 App 、page、waitNotify 通(tōng)知(zhī)到( ™✘dào)渲染線程，到(dào)了(le) Ready firstR<→ender 的(de)時(shí)候才會(huì)渲染自(zì)己做(z Ωuò)的(de)業(yè)務骨架屏，這(zhè)個(gè)過程當然很(hěn)慢(màn)。雖然♣¶你(nǐ)用(yòng)了(le)骨架屏，但(dàn)是(shì)骨架屏和(h¥≠Ωé)用(yòng)戶點擊的(de)這(zhè)段時(shí)間(jiā♥₽•n)還(hái)有(yǒu)大(dà)量的(de)白(bái)屏時(shí)間(jiπ‍γ₽ān)。用(yòng)框架骨架屏，白(bái)屏時(shí)間(jiān)問₹♣(wèn)題就(jiù)會(huì)解決。用(yòng)框架骨架屏，或多(duō)或少(sh↔↓∑'ǎo)都(dōu)會(huì)耗一(yī)點時(shí)間(jiān)，雖然是(shì)♣¶$×并行(xíng)的(de)，但(dàn)是(shì)依然在搶占手機(jī)的(de)資源。

所以整體(tǐ)來(lái)看(kàn)，站(zhàn)在客戶端"∑或者站(zhàn)在框架的(de)角度，我們是(shì)不(bù)建議(yì)用(yòng)，但(♥α¶≠dàn)是(shì)也(yě)不(bù)反對(duì)用'π•(yòng)。如(rú)果要(yào)用(yòng)就(jiù)用(yò€Ωγ♦ng)框架骨架屏，影(yǐng)響最小(xiǎo)。

request 的(de)優化(huà)，我總結主要(yào)是(shì)兩點，α☆ε↑第一(yī)要(yào)早，第二要(yào)少(shǎo)。

• “早”又(yòu)可(kě)以分(fēn)兩部分(fΩ ēn)來(lái)說(shuō)，一(yī)是(shì) ↕Ω提早發，二是(shì)不(bù)阻塞。

第一(yī)是(shì)提早發，請(qǐng)求得(de)太晚 ↕÷，展示當然比較慢(màn)了(le)。建議(yì)把網絡請(qǐng)求放(f≈‍àng)在 onlaunch 裡(lǐ)面，這(zhè)是(shì)我們給小(x¶φ×iǎo)程序開(kāi)放(fàng)的(de)第一(yī)個(gè)事(shì)件(♣₽©Ωjiàn)，很(hěn)多(duō)小(xiǎo)程序€'會(huì)放(fàng)到(dào) page unlo​​ad 裡(lǐ)面，這(zhè)個(gè)就(jiù)比較慢(màn)了(le)。這(zhè)兩個☆ε(gè)時(shí)間(jiān)在線上(shàng) 80 分(fēn)位，大(dà)概差 2↑€δ→00ms～300ms。

第二個(gè)是(shì)不(bù)阻塞，經常看(kàn)到(dào)±≈>一(yī)些(xiē)小(xiǎo)程序，一(yī)起來(₽₩≤ lái)以後，它要(yào)等用(yòng)戶的(de)授權、定位。通(tōng∏♦÷¶)常定位涉及 XY 坐(zuò)标，但(dàn)是(sh≥ ì)定位一(yī)旦涉及高(gāo)度，就(jiù)需要(yào≤>↔↕)打開(kāi) GPS，這(zhè)樣性能(néng)又(yσ₩òu)會(huì)慢(màn) 2s～3s。如(rú)果‌↕$不(bù)需要(yào)高(gāo)度就(jiù)不(bù)要(yào)去(qù)‍★$設置，否則非常慢(màn)。還(hái)有(yǒu)的(de)小(xiǎo)程序在使用(yδε↑®òng)的(de)時(shí)候會(huì)讓用(yòng)€÷ ∏戶授權，如(rú)果不(bù)授權下(xià)面什(s™↓☆÷hén)麽也(yě)不(bù)展示，阻塞了(le)。如(rú)果可(↑₹∏kě)以的(de)話(huà)，建議(yì)在需要(yào​≥)授權的(de)時(shí)候再提示用(yòng)戶，這(zhè)樣用(yòng)戶也(yě)σ∏π​不(bù)反感，也(yě)能(néng)加快(kuài)啓動的±§γ(de)速度。

• “少(shǎo)”，主要(yào)分(fēn)為(wèi)兩點，一(yī)是(​α¥shì)非關鍵請(qǐng)求延後，二是(shì)隻拉取一​₩∑(yī)屏數(shù)據。

一(yī)個(gè)小(xiǎo)程序運行(xíng)後，可(kě)能(néng)有(★×yǒu)幾十甚至上(shàng)百個(gè)網絡請(qǐng)求，小(xiǎo)程序‍→↔除了(le)自(zì)己的(de)業(yè)務還(hái)要(yào)‍​≈打點，這(zhè)會(huì)很(hěn)大(dà)程度上(shàng)影(yǐng)響我們的€✔÷(de)網絡速度。因為(wèi)一(yī)般的(de)宿主在底層的(de)網絡庫都(•"πdōu)會(huì)設置線程池，請(qǐng)求多(duō)了(le)就(jiù)要(yào)排↔ ♥隊。小(xiǎo)程序框架根本不(bù)知(zhī)道(dào)某個(gè)請§€(qǐng)求是(shì)核心請(qǐng)求還(h÷✘ái)是(shì)非核心請(qǐng)求，隻能(néng)排隊。要(yào)是(shì)一♦§≤(yī)上(shàng)來(lái)全是(shì)一(& yī)些(xiē)打點的(de)，業(yè)務就(j÷βiù)阻塞了(le)。總之，整個(gè)頁面需要(yào)顯♠✔¶示的(de)數(shù)據先請(qǐng)求，非關鍵請(qǐng)求延後。

二是(shì)隻拉一(yī)屏數(shù)據，分(fē≠€n)段加載。

（3）渲染

setData 操作(zuò)是(shì)較為(wèi)昂貴的(de)，盡量減少(₹±shǎo)數(shù)據量和(hé)次數(shù)。

如(rú)上(shàng)圖所示，setData 是(shì)一₽≥≤(yī)個(gè)非常核心的(de) API， 當網絡數(shù)據≥♦®回來(lái)，隻有(yǒu)經過 setData 驅γ£≠δ動渲染，內(nèi)容才能(néng)顯示到(dào)界面上(s→ ×hàng)。

上(shàng)圖是(shì)一(yī)個(gè)優化(huà)前和(hé)優λ€ 化(huà)後的(de)對(duì)比。我們可(kě)以看(k✔♠àn)到(dào)，即使是(shì) 1K 的(de)數(shù)據，也(yě)需​γπ要(yào) 20ms 左右的(de)時(shí)間(↕>jiān)。如(rú)果 js 是(shì)用(yòng) WebView¶₽& 來(lái)執行(xíng)，首先一(yī)個(gè) JS s♥‍‌₩tring，到(dào)了(le)浏覽器(qì)有(yǒu) Renderer 線程、B ≤₩πrowser 線程，變為(wèi) C 層的(de) ¶ ± string，然後再到(dào)我們 NA ，通(tōn₽ g)過 Java interface，變成一(yī)個(gè) Java ↔α'string。然後到(dào)了(le) slave 以後還(hái)要(yào)再γ®α反過來(lái)，所以快(kuài)不(bù)了(le)。≠∑ 雖然我們做(zuò)了(le)一(yī)些(xiē)優化(huà)，通(tōng)過內(nèi)≠ ✔¥核讓它變成一(yī)個(gè)內(nèi)存指針優化(huà)切換，但(dàn)是(sh♦>₽ì)還(hái)是(shì)很(hěn)昂貴。

發現(xiàn)有(yǒu)些(xiē)小(xiǎo)程序在使用(yòng)的(de)過程中，★< setData 使用(yòng)有(yǒu)很(hěn)多(©‌¥duō)不(bù)當之處，以下(xià)是(shì)使用(yòng) setda$' ta 要(yào)注意的(de)幾點 。

• 減少(shǎo)調用(yòng) setData 次數(shù)。go↑←‍→odcase：将多(duō)次 setData 合并成一(yī)次 setData 調用(yòn→↓g)。

• 減少(shǎo) setData 數(shù)據量。badcase：新一(yīα​↔↔)頁數(shù)據添加上(shàng)之前頁面數(shù)據後再調用(yòng) ↕≤setData。

• 變量變化(huà)隻更新變量不(bù)更新對(duì)象。

5. 性能(néng)自(zì)查

性能(néng)自(zì)查主要(yào)有(yǒu)三個(gè)階段，即開(kāi)發階‍Ω¥段、測試階段和(hé)上(shàng)線後。

• 在開(kāi)發階段這(zhè)部分(fēn)，我們有(y↔Ωǒu)三個(gè)手段去(qù)性能(néng)自(zì)查，分(f£×§ēn)别是(shì)工(gōng)具體(tǐ)驗評分(fēn)、性能(néng)面闆（在客戶♠‍₹‍端上(shàng)性能(néng)面闆可(kě)以提∏'示整個(gè)性能(néng)啓動的(de)耗時(shí)）以及打點系統。

• 在測試階段我們有(yǒu)兩個(gè)手段，一(yī)是(shì)錄屏，二是(shì)高(gāo✔≈♥)速攝像頭，這(zhè)兩個(gè)手段可(kě)以真實地(βεdì)反應用(yòng)戶的(de)體(tǐ)驗。

• 上(shàng)線之後，有(yǒu)開(kāi)發者平台。

如(rú)何獲取技(jì)術(shù)的(de)官方支₹≠Ω✔持途徑？建議(yì)去(qù)開(kāi)發者文(w↑$ én)檔和(hé)社群去(qù)獲取技(jì)術(shù)支持。

6. 章(zhāng)節小(xiǎo)結

• 開(kāi)發者可(kě)從(cóng)包體(tǐ)積、數(shù)據請(qǐng)求、☆‍↑渲染三方面去(qù)優化(huà)性能(néng)。

• 包體(tǐ)：1M 內(nèi)。分(fēn)包技(jì)術ε₽$≈(shù)、壓縮圖片、無用(yòng)資源剔除。

• 骨架屏：如(rú)果要(yào)使用(yòng)，建議(yì§←↑↕)采用(yòng)框架骨架屏。

• setData：減少(shǎo)頻(pín)度、減少(shǎo)數(shù)♦✘✘±據量。