華為快應用引擎技術架構詳解

2018 年 3 月華為與小米，Oppo，Vivo 等 9 家手機廠商，聯合釋出快應用聯盟標準。快應用是一種基於手機硬體平臺的新型應用形態，無需安裝，即點即用，又兼具原生應用體驗（效能、系統整合、互動等）。同時，快應用在誕生之初就在開發規範、能力接入、開發者服務等層面實現了手機廠商間的標準化統一，極大地降低開發者的適配成本。

與傳統應用相比，快應用具備如下特點：

• Instant：即點即用，使用者無需等待

• Everywhere：與手機的使用場景深度整合，入口無處不在（搜尋，智慧助手，智慧推薦，應用市場，瀏覽器 ……）

• Efficient：準前端的開發方式，效率高

華為快應用引擎架構簡介

上圖是快應用的總體框架示意圖。最上面是應用形態以及場景入口，中間是快應用引擎，底下是 OS(作業系統) 的基礎設施及其硬體。從執行路徑層面，有標準的 HTML5 方式支撐通用的 Web 場景（一般通過系統的 Webview 元件或定製的 Webview）， 以及 JS（JavaScript）+Native 的方式，支撐更輕量、更快速的體驗。 下面將按 3 個層面方面簡要介紹快應用引擎的架構。

  應用開發（前端框架 + 元件 & API 能力）

快應用的前端設計借鑑並整合了主流前端框架（Vue，React 等）的設計思路：以元件化的方式構建應用，以資料繫結為核心的 MVVM 設計模式，以 V-DOM 的方式提升效能，同時選擇了簡潔清晰的類 Vue 的模板。同時對佈局方面做了相應精簡。從新的應用形態、對映原生 UI、能力開放的角度，需要定義一套元件與 API 規範，方便開發這快速開發應用。

  系統整合（應用管理，卡片 – 嵌入式 SDK，安全機制等等）

快應用作為完整的應用形態，可以與系統深入整合，如同原生應用一樣執行，以及和系統互動。快應用目前有兩種形態：全屏方式的獨立應用形態與嵌入方式的卡片形態。在獨立應用的形態下，給使用者的體驗就像原生的應用程式，有完整的生命週期管理，頁面管理，路由等。快應用可以寄生於安卓的 Activity，頁面寄生於 Fragment，並通過獨立的後臺 Service 進行例項的管控。卡片則是另外一種形態，通過嵌入式 SDK 作為一個獨立的區域性控制元件嵌入到系統的各個角落，輕量化的展現動態內容。在安全隔離方面，可通過沙盒機制，程式隔離，許可權控制，並結合作業系統層的支援做到較好的安全保障。

  效能體驗 & 新興場景 （JavaScript 引擎，渲染引擎，端 – 雲 – 芯加速，新興場景）

在互動體驗、資源開銷和穩定性等方面，快應用通過引入原生渲染路徑，進而實現前端開發方式 + 原生渲染與平臺能力有效組合。

不同於其它的應用層的跨平臺框架，快應用植根於手機系統，可實現從晶片<–>作業系統<–>雲的深度整合。端和雲的結合以啟動效能加速為例，通過雲和端的協同渲染，網路鏈路層的優化可以大大加速快應用啟動速度。同時可以整合硬體平臺的特有能力，進一步提升體驗。例如可以結合華為手機 AI 晶片，將 NPU 的算力整合到快應用引擎中來，使得 AI 場景（人臉識別、影像超分等）在端側可以低延時、高效能的執行，同時又有效保護了使用者的隱私，並節省頻寬。

下面以啟動加速作為案例，分享一下體驗優化方面做的一些工作。

秒開的使用者體驗是快應用的核心競爭力之一。Google 的統計表明，頁面開啟時間超過 3 秒使用者會流失 13%，超過 6 秒使用者會流失 60%。反過來，開啟時間每減少 1 秒可提升 27% 的轉化率。目前快應用從使用者點選到首頁內容完全展示基本需要 2 秒左右甚至更久。

啟動流程：

1）首次啟動時，使用者點選觸發快應用包的下載，同時做引擎初始化相關工作。當整包下載與校驗完成後，需要展示的第一個頁面的 JavaScript 檔案才會被載入並開始渲染。這個過程中包下載是瓶頸，從實測資料看，正常網路下 200K 左右的包下載時間至少要 400 毫秒以上，2M 包要 2 秒以上。

2）頁面渲染包括 JavaScript 載入、頁面與 JavaScript 框架邏輯的執行、佈局的運算，最終到原生 UI 控制元件的繪製。其中，頁面內邏輯執行時會有一次或多次的到應用自己的三方伺服器的網路請求，請求返還的資料驅動頁面的再次渲染，直至首屏內容完全展示。

這裡網路請求、JavaScript 執行、排版與繪製並非簡單的序列關係，而是並行化地交織在一起影響著整個頁面的渲染效能，並與頁面設計的邏輯、網路狀況與裝置執行的狀態強相關。

啟動效能的優化涉及到的內容較多，這裡主要介紹兩種優化方案：

流式載入 — 解決網路延時問題

快應用首次啟動需要從雲端下載快應用的程式包（RPK），整包下載完成才能進行解壓與校驗，之後載入並執行相應的 JavaScript 檔案。排除伺服器端響應速度與網路狀況的影響，下載延時與檔案包大小成正比。我們引入了端雲協同的流式載入方式以減少包延時。

流式載入：

流式載入是將啟動所需要的資源在網路流中優先傳輸，這部分資源傳輸完後並進行解壓與校驗，首頁的渲染就可以立即執行了。網路流的後續傳輸仍在持續進行直至下載過程全部完成。首次渲染所需資源往往很小，所以流式載入能明顯降低下載延時，包越大效果越明顯。流式載入需要解決如下問題：

1）如何決定哪些內容要優先下載？

正常情況下啟動所需資源比較固定（公共資源、全域性的配置檔案、首頁 JavaScript 檔案與圖片等等），這些在應用打包的時候排在檔案的前部即可；當首次開啟是某個非首頁時，我們就需要在傳輸時將該頁面所需資源排列到網路流前部。

2）訪問到了某個未下載的資源怎麼辦？

網路狀況是不可控的，存在一定的概率出現延時較高的情況。如果此時從首次開啟的 A 頁面跳轉的 B 頁面而 B 頁面所需的資源尚未下載完成，則需要在頁面跳轉的過程進行等待，並向服務發起優先排程 B 頁面資源。等 B 頁面資源下載完成後，繼續頁面跳轉的過程。

3）簽名問題如何解決？

原始的簽名方式是對整包進行簽名，待整個包下載完成後才能執行校驗，這是無法滿足流式載入的需求的。為此我們引入了二級校驗的方式：對包的不同片段單獨生成 hash 值，將所有的 Hash 值拼接成一個 Hash 檔案，對該 Hash 檔案進行簽名。下載時 Hash 檔案被優先傳輸，傳輸完先校驗 Hash 檔案的合法性。之後流式載入過程中，無論哪個片段下載完成後，可以立即計算 Hash 值，並與 Hash 檔案中相應的 Hash 值進行比對，校驗合法性。

快照 — 解決首屏渲染問題

首頁的渲染也是一個比較耗時的過程，要經過 JavaScript 載入、頁面與 JavaScript 框架邏輯的執行、佈局的運算，最終到原生 UI 控制元件的繪製。這裡我們引入一種快照機制，來加速渲染過程。

快照：

首先，在雲端對所需要的頁面進行預渲染處理，生成一種渲染的中間格式 — 快照。它不需要 JavaScript 的運算，解析後可以直接快速地進行頁面資料請求、UI 的排版與繪製。快照格式壓縮後也非常小，50K 左右的 JavaScript 檔案生成快照的大約 3K。

由於快照檔案非常小，可以作為快應用的後設資料的一部分分發到對應的快應用啟動入口。例如應用市場，使用者在應用市場搜尋到快應用時，快照已經隨著快應用的名字，包下載連結等資訊一起載入完成。

當快應用首次載入啟動時，包的下載地址與快照檔案一起傳給快應用引擎。引擎在請求下載快應用包的同時，載入解析快照，渲染出首屏。當包下載完成後, 標準的渲染流程在快照的基礎上繼續執行。

優化效果展示

以“快看漫畫”為例，通過這些優化，目前評測下來應用的冷啟動時間降低將近一半（從~2 秒到~1 秒），後續會逐步上線並擴充套件更多場景。

總結

即點即用是應用和服務的趨勢。快應用作為一種新型的應用形態，通過結合動態化前端框架，原生渲染能力，以及作業系統和晶片級整合，達到較好的使用者體驗。當然體驗優化，場景擴充套件永無止境，我們會持續努力，不斷探索優化來支撐更好的體驗。

2. 如何快速開發一個快應用

華為快應用 IDE 是由華為推出一款針對快應用的整合開發環境，基於快應用廠商聯盟標準，提供了快應用開發、構建、除錯、測試、釋出等能力。

快應用開發流程：

  環境準備

1. 準備一臺手機、一臺 PC（Windows、蘋果都可以）

2. 安裝快應用 IDE：http://developer.huawei.com/consumer/cn/service/hms/catalog/fastapp.html?page=fastapp_fastapp_devprepare_install_tool

安裝完成以後，支援啟動 IDE 會看到如下介面：

可以看到，這是典型的 IDE 結構，之後就開始開發一個快應用。

  開發一個影評的快應用

新建一個快應用工程，我們使用最基礎的 HelloWorld 模板，點選選單“檔案 ->新建專案”，輸入專案專案資訊即可完成建立。

專案建立完成後，可以看到 IDE 的主要功能佈局。這是一個典型的常見 IDE 佈局結構：選單欄、控制欄、資源管理區、程式碼編輯區、預覽區、控制檯區，這些都是開發者比較常見的，都很容易上手使用。

開始具體的編碼了。這裡設計了一個簡單的影評應用業務邏輯：應用的首頁是電影的列表，點選進去以後，可以檢視到相應影評。首先是首頁電影列表的開發，我們直接將模板中的 hello.ux 為影評首頁，然後新增一個影評的詳細子頁面，命名為 detail.ux。將所需的圖片資源放在 Common 目錄下。影評文字寫在 ux 原始碼檔案裡。這些動作可以通過在資源管理區使用右鍵中完成。

接下來配置頁面與路徑，參考標準規範，在工程的 manifest.json 檔案的 router 和 display，新增 detail 頁面，把 Hello，改成“影評”，同時新增“詳情”。

到這裡，整個應用的結構已經完成了，下面就是具體的編碼了。首頁需要展現電影列表，我們這裡使用 List[] 陣列，使用快應用的 list 元件迴圈顯示影評的圖片 $item.image 和標題 $item.title。goDetail() 函式在點選時跳轉到影評詳情頁 detail.ux。這裡有驚喜，IDE 的編碼輔助上提供了很不錯的支援，基於快應用標準，程式碼的聯想、補齊、語法檢測與修改意見、定義與引用跳轉，都很好的支援了，省去了不少標準語法 check 的工作。

完成影評列表的首頁開發，下面就是具體影評的詳細頁面了。detail.ux 作為詳情頁，這裡使用簡單 text 元件顯示文字，當前也可以做更多的樣式，可以新增圖片或電影視訊片段等等。我們這裡直接寫幾個影評資訊，就完成了詳情頁的開發了。

接下來就是看執行效果了，點選“預覽”控制按鈕，在預覽區域就能看到執行效果了，可以一邊寫程式碼，一邊看到實時的執行效果，這個功能很實用，也解決了之前被開發者抱怨沒有預覽，不便於開發的問題。

編碼已經基本完成了，下面試一下除錯功能，快應用 IDE 的除錯功能提供了 Source 斷點除錯、Element 元素審查、NetWork 網路抓包、Log 分析等特性。點選除錯按鈕（快捷鍵 F5），啟動除錯程式，如下圖，也是典型的 DevTools 方式，比較常用，這裡嘗試了斷點除錯與 Inspect。

直接在控制欄，點選“除錯”按鈕，進入除錯。

點選控制欄的“Inspect”，推送的手機執行，會在桌面彈出執行框，這個時候也是可以拔出手機繼續使用的。

到這裡我們影評快應用的開發已經完成了，繼續看 IDE 其他特性。在控制欄有一個測試按鈕。點選測試按鈕，在登入成功後，在彈出的皮膚裡，點選”按鈕”就可以一鍵生成自動化測試任務。大概 10 分鐘左右，測試就完成，還可以檢視詳細的測試報告。從測試報告可以看出，快應用的測試是在雲端進行的，覆蓋了主流的機型與安卓版本，測試項也很豐富，每一個測試頁面都覆蓋到了，可以在報告中看到詳細的步驟。這樣解決了沒有手機覆蓋相容性、測試工作投入大的難題，很實用。

最後釋出快應用，可以直接進入這個地址：https://www.quickapp.cn/ 即可在廠商聯盟官網上釋出這個快應用，繫結完各廠商的開發者帳號後，釋出一次即可在所有的聯盟的手機廠商上上架使用了。

  作者簡介

華為快應用團隊，負責快應用引擎，快應用 IDE 及雲端快應用儲存倉庫的建設和研發工作，同時為華為的快服務提供基礎能力支撐，在整個華為產品生態下全場景的為使用者帶來即點即用的服務提供支援。

原文釋出時間：2018-6-20

原文作者： mp.weixin.qq.com

本文來源掘金如需轉載請緊急聯絡作者