2024 年 3 月華為與小米，Oppo，Vivo 等 9 家手機廠商，聯合發布快應用聯盟標準。愛掏網 - it200.com快應用是一種基于手機硬件平臺的新型應用形態，無需安裝，即點即用，又兼具原生應用體驗（性能、系統整合、交互等）。愛掏網 - it200.com同時，快應用在誕生之初就在開發規范、能力接入、開發者服務等層面實現了手機廠商間的標準化統一，極大地降低開發者的適配成本。愛掏網 - it200.com
與傳統應用相比，快應用具備如下特點：
-
Instant：即點即用，用戶無需等待
-
Everywhere：與手機的使用場景深度整合，入口無處不在（搜索，智能助手，智能推薦，應用市場，瀏覽器 ……）
-
Efficient：準前端的開發方式，效率高
上圖是快應用的總體框架示意圖。愛掏網 - it200.com最上面是應用形態以及場景入口，中間是快應用引擎，底下是 OS(操作系統) 的基礎設施及其硬件。愛掏網 - it200.com從執行路徑層面，有標準的 HTML5 方式支撐通用的 Web 場景（一般通過系統的 Webview 組件或定制的 Webview）， 以及 JS（JavaScript）+Native 的方式，支撐更輕量、更快速的體驗。愛掏網 - it200.com 下面將按 3 個層面方面簡要介紹快應用引擎的架構。愛掏網 - it200.com
? 應用開發（前端框架 + 組件 & API 能力）快應用的前端設計借鑒并整合了主流前端框架（Vue，React 等）的設計思路：以組件化的方式構建應用，以數據綁定為核心的 MVVM 設計模式，以 V-DOM 的方式提升性能，同時選擇了簡潔清晰的類 Vue 的模板。愛掏網 - it200.com同時對布局方面做了相應精簡。愛掏網 - it200.com從新的應用形態、映射原生 UI、能力開放的角度，需要定義一套組件與 API 規范，方便開發這快速開發應用。愛掏網 - it200.com
? 系統整合（應用管理，卡片 - 嵌入式 SDK，安全機制等等）快應用作為完整的應用形態，可以與系統深入整合，如同原生應用一樣運行，以及和系統交互。愛掏網 - it200.com快應用目前有兩種形態：全屏方式的獨立應用形態與嵌入方式的卡片形態。愛掏網 - it200.com在獨立應用的形態下，給用戶的體驗就像原生的應用程序，有完整的生命周期管理，頁面管理，路由等。愛掏網 - it200.com快應用可以寄生于安卓的 Activity，頁面寄生于 Fragment，并通過獨立的后臺 Service 進行實例的管控。愛掏網 - it200.com卡片則是另外一種形態，通過嵌入式 SDK 作為一個獨立的局部控件嵌入到系統的各個角落，輕量化的展現動態內容。愛掏網 - it200.com在安全隔離方面，可通過沙盒機制，進程隔離，權限控制，并結合操作系統層的支持做到較好的安全保障。愛掏網 - it200.com
? 性能體驗 & 新興場景 （JavaScript 引擎，渲染引擎，端 - 云 - 芯加速，新興場景）在交互體驗、資源開銷和穩定性等方面，快應用通過引入原生渲染路徑，進而實現前端開發方式 + 原生渲染與平臺能力有效組合。愛掏網 - it200.com
不同于其它的應用層的跨平臺框架，快應用植根于手機系統，可實現從芯片操作系統云的深度整合。愛掏網 - it200.com端和云的結合以啟動性能加速為例，通過云和端的協同渲染，網絡鏈路層的優化可以大大加速快應用啟動速度。愛掏網 - it200.com同時可以整合硬件平臺的特有能力，進一步提升體驗。愛掏網 - it200.com例如可以結合華為手機 AI 芯片，將 NPU 的算力整合到快應用引擎中來，使得 AI 場景（人臉識別、圖像超分等）在端側可以低延時、高性能的執行，同時又有效保護了用戶的隱私，并節省帶寬。愛掏網 - it200.com
下面以啟動加速作為案例，分享一下體驗優化方面做的一些工作。愛掏網 - it200.com
秒開的用戶體驗是快應用的核心競爭力之一。愛掏網 - it200.comGoogle 的統計表明，頁面打開時間超過 3 秒用戶會流失 13%，超過 6 秒用戶會流失 60%。愛掏網 - it200.com反過來，打開時間每減少 1 秒可提升 27% 的轉化率。愛掏網 - it200.com目前快應用從用戶點擊到首頁內容完全展示基本需要 2 秒左右甚至更久。愛掏網 - it200.com
啟動流程：
1）首次啟動時，用戶點擊觸發快應用包的下載，同時做引擎初始化相關工作。愛掏網 - it200.com當整包下載與校驗完成后，需要展示的第一個頁面的 JavaScript 文件才會被加載并開始渲染。愛掏網 - it200.com這個過程中包下載是瓶頸，從實測數據看，正常網絡下 200K 左右的包下載時間至少要 400 毫秒以上，2M 包要 2 秒以上。愛掏網 - it200.com
2）頁面渲染包括 JavaScript 加載、頁面與 JavaScript 框架邏輯的執行、布局的運算，最終到原生 UI 控件的繪制。愛掏網 - it200.com其中，頁面內邏輯執行時會有一次或多次的到應用自己的三方服務器的網絡請求，請求返還的數據驅動頁面的再次渲染，直至首屏內容完全展示。愛掏網 - it200.com
這里網絡請求、JavaScript 執行、排版與繪制并非簡單的串行關系，而是并行化地交織在一起影響著整個頁面的渲染性能，并與頁面設計的邏輯、網絡狀況與設備運行的狀態強相關。愛掏網 - it200.com
啟動性能的優化涉及到的內容較多，這里主要介紹兩種優化方案：
流式加載 -- 解決網絡延時問題
快應用首次啟動需要從云端下載快應用的程序包（RPK），整包下載完成才能進行解壓與校驗，之后加載并執行相應的 JavaScript 文件。愛掏網 - it200.com排除服務器端響應速度與網絡狀況的影響，下載延時與文件包大小成正比。愛掏網 - it200.com我們引入了端云協同的流式加載方式以減少包延時。愛掏網 - it200.com
流式加載：
流式加載是將啟動所需要的資源在網絡流中優先傳輸，這部分資源傳輸完后并進行解壓與校驗，首頁的渲染就可以立即執行了。愛掏網 - it200.com網絡流的后續傳輸仍在持續進行直至下載過程全部完成。愛掏網 - it200.com首次渲染所需資源往往很小，所以流式加載能明顯降低下載延時，包越大效果越明顯。愛掏網 - it200.com流式加載需要解決如下問題：
1）如何決定哪些內容要優先下載？
正常情況下啟動所需資源比較固定（公共資源、全局的配置文件、首頁 JavaScript 文件與圖片等等），這些在應用打包的時候排在文件的前部即可；當首次打開是某個非首頁時，我們就需要在傳輸時將該頁面所需資源排列到網絡流前部。愛掏網 - it200.com
2）訪問到了某個未下載的資源怎么辦？
網絡狀況是不可控的，存在一定的概率出現延時較高的情況。愛掏網 - it200.com如果此時從首次打開的 A 頁面跳轉的 B 頁面而 B 頁面所需的資源尚未下載完成，則需要在頁面跳轉的過程進行等待，并向服務發起優先調度 B 頁面資源。愛掏網 - it200.com等 B 頁面資源下載完成后，繼續頁面跳轉的過程。愛掏網 - it200.com
3）簽名問題如何解決？
原始的簽名方式是對整包進行簽名，待整個包下載完成后才能執行校驗，這是無法滿足流式加載的需求的。愛掏網 - it200.com為此我們引入了二級校驗的方式：對包的不同片段單獨生成 hash 值，將所有的 Hash 值拼接成一個 Hash 文件，對該 Hash 文件進行簽名。愛掏網 - it200.com下載時 Hash 文件被優先傳輸，傳輸完先校驗 Hash 文件的合法性。愛掏網 - it200.com之后流式加載過程中，無論哪個片段下載完成后，可以立即計算 Hash 值，并與 Hash 文件中相應的 Hash 值進行比對，校驗合法性。愛掏網 - it200.com
快照 -- 解決首屏渲染問題
首頁的渲染也是一個比較耗時的過程，要經過 JavaScript 加載、頁面與 JavaScript 框架邏輯的執行、布局的運算，最終到原生 UI 控件的繪制。愛掏網 - it200.com這里我們引入一種快照機制，來加速渲染過程。愛掏網 - it200.com
快照：
首先，在云端對所需要的頁面進行預渲染處理，生成一種渲染的中間格式 -- 快照。愛掏網 - it200.com它不需要 JavaScript 的運算，解析后可以直接快速地進行頁面數據請求、UI 的排版與繪制。愛掏網 - it200.com快照格式壓縮后也非常小，50K 左右的 JavaScript 文件生成快照的大約 3K。愛掏網 - it200.com
由于快照文件非常小，可以作為快應用的元數據的一部分分發到對應的快應用啟動入口。愛掏網 - it200.com例如應用市場，用戶在應用市場搜索到快應用時，快照已經隨著快應用的名字，包下載鏈接等信息一起加載完成。愛掏網 - it200.com
當快應用首次加載啟動時，包的下載地址與快照文件一起傳給快應用引擎。愛掏網 - it200.com引擎在請求下載快應用包的同時，加載解析快照，渲染出首屏。愛掏網 - it200.com當包下載完成后, 標準的渲染流程在快照的基礎上繼續執行。愛掏網 - it200.com
優化效果展示
以“快看漫畫”為例，通過這些優化，目前評測下來應用的冷啟動時間降低將近一半（從~2 秒到~1 秒），后續會逐步上線并擴展更多場景。愛掏網 - it200.com
總結即點即用是應用和服務的趨勢。愛掏網 - it200.com快應用作為一種新型的應用形態，通過結合動態化前端框架，原生渲染能力，以及操作系統和芯片級整合，達到較好的用戶體驗。愛掏網 - it200.com當然體驗優化，場景擴展永無止境，我們會持續努力，不斷探索優化來支撐更好的體驗。愛掏網 - it200.com
2. 如何快速開發一個快應用華為快應用 IDE 是由華為推出一款針對快應用的集成開發環境，基于快應用廠商聯盟標準，提供了快應用開發、構建、調試、測試、發布等能力。愛掏網 - it200.com
快應用開發流程：
? 環境準備-
準備一臺手機、一臺 PC（Windows、蘋果都可以）
-
安裝快應用 IDE：http://developer.huawei.com/consumer/cn/service/hms/catalog/fastapp.html?page=fastapp_fastapp_devprepare_install_tool
安裝完成以后，支持啟動 IDE 會看到如下界面：
可以看到，這是典型的 IDE 結構，之后就開始開發一個快應用。愛掏網 - it200.com
? 開發一個影評的快應用新建一個快應用工程，我們使用最基礎的 HelloWorld 模板，點擊菜單“文件 ->新建項目”，輸入項目項目信息即可完成創建。愛掏網 - it200.com
項目創建完成后，可以看到 IDE 的主要功能布局。愛掏網 - it200.com這是一個典型的常見 IDE 布局結構：菜單欄、控制欄、資源管理區、代碼編輯區、預覽區、控制臺區，這些都是開發者比較常見的，都很容易上手使用。愛掏網 - it200.com
開始具體的編碼了。愛掏網 - it200.com這里設計了一個簡單的影評應用業務邏輯：應用的首頁是電影的列表，點擊進去以后，可以查看到相應影評。愛掏網 - it200.com首先是首頁電影列表的開發，我們直接將模板中的 hello.ux 為影評首頁，然后新增一個影評的詳細子頁面，命名為 detail.ux。愛掏網 - it200.com將所需的圖片資源放在 Common 目錄下。愛掏網 - it200.com影評文本寫在 ux 源碼文件里。愛掏網 - it200.com這些動作可以通過在資源管理區使用右鍵中完成。愛掏網 - it200.com
接下來配置頁面與路徑，參考標準規范，在工程的 manifest.json 文件的 router 和 display，添加 detail 頁面，把 Hello，改成“影評”，同時添加“詳情”。愛掏網 - it200.com
到這里，整個應用的結構已經完成了，下面就是具體的編碼了。愛掏網 - it200.com首頁需要展現電影列表，我們這里使用 List[] 數組，使用快應用的 list 組件循環顯示影評的圖片 $item.image 和標題 $item.title。愛掏網 - it200.comgoDetail() 函數在點擊時跳轉到影評詳情頁 detail.ux。愛掏網 - it200.com這里有驚喜，IDE 的編碼輔助上提供了很不錯的支持，基于快應用標準，代碼的聯想、補齊、語法檢測與修改意見、定義與引用跳轉，都很好的支持了，省去了不少標準語法 check 的工作。愛掏網 - it200.com
完成影評列表的首頁開發，下面就是具體影評的詳細頁面了。愛掏網 - it200.comdetail.ux 作為詳情頁，這里使用簡單 text 組件顯示文本，當前也可以做更多的樣式，可以添加圖片或電影視頻片段等等。愛掏網 - it200.com我們這里直接寫幾個影評信息，就完成了詳情頁的開發了。愛掏網 - it200.com
接下來就是看運行效果了，點擊“預覽”控制按鈕，在預覽區域就能看到運行效果了，可以一邊寫代碼，一邊看到實時的運行效果，這個功能很實用，也解決了之前被開發者抱怨沒有預覽，不便于開發的問題。愛掏網 - it200.com
編碼已經基本完成了，下面試一下調試功能，快應用 IDE 的調試功能提供了 Source 斷點調試、Element 元素審查、NetWork 網絡抓包、Log 分析等特性。愛掏網 - it200.com點擊調試按鈕（快捷鍵 F5），啟動調試進程，如下圖，也是典型的 DevTools 方式，比較常用，這里嘗試了斷點調試與 Inspect。愛掏網 - it200.com
直接在控制欄，點擊“調試”按鈕，進入調試。愛掏網 - it200.com
點擊控制欄的“Inspect”，推送的手機運行，會在桌面彈出運行框，這個時候也是可以拔出手機繼續使用的。愛掏網 - it200.com
到這里我們影評快應用的開發已經完成了，繼續看 IDE 其他特性。愛掏網 - it200.com在控制欄有一個測試按鈕。愛掏網 - it200.com點擊測試按鈕，在登錄成功后，在彈出的面板里，點擊”按鈕”就可以一鍵生成自動化測試任務。愛掏網 - it200.com大概 10 分鐘左右，測試就完成，還可以查看詳細的測試報告。愛掏網 - it200.com從測試報告可以看出，快應用的測試是在云端進行的，覆蓋了主流的機型與安卓版本，測試項也很豐富，每一個測試頁面都覆蓋到了，可以在報告中看到詳細的步驟。愛掏網 - it200.com這樣解決了沒有手機覆蓋兼容性、測試工作投入大的難題，很實用。愛掏網 - it200.com
最后發布快應用，可以直接進入這個地址：https://www.quickapp.cn/ 即可在廠商聯盟官網上發布這個快應用，綁定完各廠商的開發者帳號后，發布一次即可在所有的聯盟的手機廠商上上架使用了。愛掏網 - it200.com
? 作者簡介華為快應用團隊，負責快應用引擎，快應用 IDE 及云端快應用存儲倉庫的建設和研發工作，同時為華為的快服務提供基礎能力支撐，在整個華為產品生態下全場景的為用戶帶來即點即用的服務提供支持。愛掏網 - it200.com
原文發布時間：2024-6-20
原文作者： mp.weixin.qq.com
本文來源掘金如需轉載請緊急聯系作者