百度智能小程序框架性能優化實踐（上）

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