導讀：今天分享的文章是來自百度智能小程序研發部的實戰總結：《百度開源小程序框架架構演進和性能優化實踐》。分享包含兩部分，第一部分是百度智能小程序總體的框架及演進，主要講百度小程序開發全流程概況、百度智能小程序框架，以及百度小程序多宿主運行保障；第二部分是百度小程序框架的性能優化，主要講整個小程序的啓動過程，以及從開發者角度，有哪些重要的優化點。前端
1、百度智能程序總體框架及演進
整個移動互聯網一直是在 NA 和 H5 之間尋找權衡，NA 的性能好、能力強；H5 靈活性更高。我認爲渲染分爲兩派，一派就是 NA 渲染派，一派叫作 H5 渲染派。小程序
NA 渲染派，比較有表明性的如 RN 、 Flutter ；Web 渲染派，好比百度的輕應用，以及以後作的小程序。瀏覽器
1. 開發全流程概覽
百度曾經作過的 Web 渲染派的三個表明產品，分別是輕應用、直達號和小程序。
-
輕應用，是 H5 + 端能力。它是一個標準的 H5，增長了一些 NA 的 API，好比定位等。安全
-
直達號，在技術層面跟輕應用是同樣的。性能優化
-
小程序，本質上是一個受限的 H5 + 大量豐富的 API + UI 組件。如今咱們給小程序提供的 API 有 300 多個，組件有 30 多個，組件是有界面的。好比，視頻、地圖 。服務器
爲何小程序要受限，主要有兩個緣由：
-
保持體驗的一致性。H5 太過靈活，JS 隨時能夠去改變界面。架構
-
安全考慮。由於咱們提供了大量 API 和組件，且這些都是很底層的一些能力，好比電話號碼、帳號，確定不能輕易開放給你們。框架
怎麼受限，主要有兩點：
-
編寫語言，再也不是直接寫 HTML ，而是用自定義語言 swan 來編寫 。ide
-
runtime 層有兩個棧，一個是渲染棧，一個是 JS 執行棧，這兩個棧從物理上隔離，以保障安全性。工具
2. 智能小程序框架
（1）開發運行全流程
先簡單介紹一下整個百度智能小程序的開發流程。
-
首先開發者用 swan 寫佈局；
-
接着經過開發者工具打包，上傳到咱們的小程序 B 端服務器；
-
而後是小程序的審覈流程，有機審、人審；
-
最後是用戶點擊小程序時，客戶端請求小程序 C 端服務器，C 端服務器再從 B 端服務器獲取小程序包。整個過程都是加密傳輸，能夠保證代碼的安全。
（2）百度智能小程序框架 -SWAN
上圖是一個百度智能小程序的框架，咱們內部命名爲SWAN。
分層結構以下：
-
最上層是開發者基礎庫，命名爲 swan-js ，開發者直接和這層打交道。swan-js 負責兩件事情：即 swan 代碼轉爲 HTML，變成 WebView 可運行程序；客戶端端能力的封裝暴露。
-
再下一層是 swan-native。這裏面最核心的是API 和組件的 NA 實現。其中雙棧管理也在這一層，另外標紅的 Extension 用於開發者宿主自身能力擴展使用，好比，貼吧宿主指望增長個發帖能力，就能夠經過此機制。
-
再下面這層叫 Porting Layer。這層是百度小程序爲了實現開源，增長的一層與宿主的接口層。最下面這一層是宿主基礎能力層。若是宿主沒有這些能力，能夠參考百度開源的參考實現，可直接集成到宿主使用。
3. 核心結構
（1）前端角度
咱們從前端的視角來看看雙棧結構。一個宿主客戶端能夠運行多個小程序，而且在一段時間內保持存活狀態，每一個小程序都有一個 master 執行框架 JS 和小程序開發者的 JS，一個 master 對應多個 slave（slave 表明一個用戶可見的界面）。
（2）客戶端角度
從客戶端角度來看雙棧結構，如上圖所示，master 負責執行 JS，能夠有兩種實現方式，WebView 或 JS 引擎（V8/jscore），JS 引擎的效率更高；slave 的展示有 WebView，爲了加快 WebView 的建立速度，設置 cache；master 和 slave 的通訊經過消息總線。
master 不支持 BOM、DOM 和 WEB-API，小程序只能調用對外開放的能力。
（3）小程序 NA 組件與界面關係
從體驗上看，小程序的體驗要好於 H5，其中有一點就是小程序會把一些 NA 的能力和 UI 融合到小程序裏面去。小程序的主體渲染仍是基於 H5 技術，接下來咱們講一下 NA 元素如何融入 UI 界面。
NA 元素與 H5 的關係有兩種，貼片關係、同層關係。
貼片關係：NA 元素在 H5 不在同一層，NA 浮在 H5 之上，H5 全部元素都不能夠放到 NA 元素之上。由於不在一層，就須要處理滾動聯動，當檢測到 WebView 滾動 n 個像素， NA 元素也須要滾動 n 個像素。
同層關係：NA 元素在 H5 這一層，H5 的原生能夠壓在 NA 元素之上。
貼片、同層的界面層級樹如上。
咱們舉一個視頻組件同層的例子。視頻組件比較複雜，有 4 層。第 1 層是視頻層，即原始視頻的圖像，第 2 層是彈幕層，第 3 層是用於視頻控制的控件層（好比，開始、暫停按鍵），第 4 層 Slot 層，視頻上面漂的 H5 元素將被放到這層。
同層處理機制，先在 H5（開發者寫的 swan 會被轉爲 H5） 上打一個特殊的標記先佔位，屬性 inline；瀏覽內核把這個區域的 surface 拿出來給到 NA 層；而後，小程序框架會把這個區域 surface 塞給播放器，讓播放器直接在 surface 上面繪製，達到同層。上面的彈幕、控件、 Slot ，都是 swanjs 層 H5 實現 ，Slot 層能夠認爲是一個容器，例如寫一個 video，其全部的子元素都會放在 Slot。
NA 的組件同層的技術方案還不太同樣，安卓和 iOS 也是有些區別的。像在 iOS 上，若是有些組件設置 over-flow ，它會自然支持這一套東西，可是安卓就須要瀏覽器內核來支持。
4. 小程序多宿主運行保障
百度智能小程序是開放系統，能夠運行在多宿主之上，那如何在多宿主上保證小程序運行體驗的一致性呢？
各個宿主集成了咱們的小程序框架後，首先要跑 CTS 測試，經過以後才能夠拿到小程序列表進行分發。
對於可選能力部分，各個宿主不是全部的能力都須要實現。好比，一些 AI 能力、push 能力。
若是一個小程序用到了可選能力怎麼辦？
兩個辦法，一是小程序和宿主之間的雙向選擇機制，小程序能夠選擇我要分發到哪些平臺，宿主也有權利選擇要分發到哪些宿主。二是，小程序作兼容。
Estension 機制
上圖所示，標紅的是Extension 機制，當宿主有一些定製化的要求時，可使用此機制。做爲宿主，須要作兩件事情，一是在 JS 層須要寫一套接口；二是在 Porting Layer 接口實現層實現一套能力。若是宿主以爲這個能力是通用的，能夠反饋提案，審覈經過後，百度小程序團隊會將提案合併到開源框架裏。
5. 章節小結
更多精彩內容歡迎關注百度開發者中心公衆號。