背景

2024 年 1 月，京東正式啟動鴻蒙原生應(yīng)用開發(fā)，基于 HarmonyOS NEXT 的全場景、原生智能、原生安全等優(yōu)勢特性，為消費者打造更流暢、更智能、更安全的購物體驗。同年 6 月，京東鴻蒙原生應(yīng)用嘗鮮版上架華為應(yīng)用市場，計劃 9 月完成正式版的上架。

早在 2020 年，京東與華為就簽署了戰(zhàn)略合作協(xié)議，不斷加大技術(shù)投入探索 HarmonyOS 的創(chuàng)新特性。作為華為鴻蒙生態(tài)的首批頭部合作伙伴，在適配鴻蒙操作系統(tǒng)的過程中，京東與華為一直保持著密切的技術(shù)溝通與共創(chuàng)，雙方共同攻堅行業(yè)適配難點，并推動多端統(tǒng)一開發(fā)解決方案 Taro 在業(yè)界率先實現(xiàn)對鴻蒙 ArkUI 的原生開發(fā)支持。

本文將闡述京東鴻蒙原生應(yīng)用在開發(fā)時所采用的技術(shù)方案、技術(shù)特點、性能表現(xiàn)以及未來的優(yōu)化計劃。通過介紹選擇 Taro 作為京東鴻蒙原生應(yīng)用的開發(fā)框架的原因，分析 Taro 在支持 Web 范式開發(fā)、快速遷移存量項目、渲染性能優(yōu)化、高階功能支持以及混合開發(fā)模式等方面的優(yōu)勢。

技術(shù)方案

京東在開發(fā)鴻蒙原生應(yīng)用的過程中，需要考慮如何在有限的時間內(nèi)高效完成項目，同時兼顧應(yīng)用的性能與用戶體驗。為了達成這一目標，選擇合適的技術(shù)方案至關(guān)重要。

在技術(shù)選型方面，開發(fā)一個鴻蒙原生應(yīng)用，一般會有兩種選擇：

使用原生 ArkTS 進行鴻蒙開發(fā)

使用跨端框架進行鴻蒙開發(fā)

使用原生 ArkTS 進行鴻蒙開發(fā)，面臨著開發(fā)周期冗長、維護多端多套應(yīng)用代碼成本高昂的挑戰(zhàn)。在交付時間緊、任務(wù)重的情況下，京東果斷選擇跨端框架來開發(fā)鴻蒙原生應(yīng)用，以期在有限的時間內(nèi)高效完成項目。

作為在業(yè)界具備代表性的開源跨端框架之一，Taro 是由京東凹凸實驗室團隊開發(fā)的一款開放式跨端跨框架解決方案，它支持開發(fā)者使用一套代碼，實現(xiàn)在 H5、小程序以及鴻蒙等多個平臺上的運行。

通過 Taro 提供的編譯能力，開發(fā)者可以將整個 Taro 項目輕松地轉(zhuǎn)換為一個獨立的鴻蒙應(yīng)用，無需額外的開發(fā)工作。

另外，Taro 也支持將項目里的部分頁面以模塊化的形式打包進原生的鴻蒙應(yīng)用中，京東鴻蒙原生應(yīng)用便是使用這種模式進行開發(fā)的。

京東鴻蒙原生應(yīng)用的基礎(chǔ)基建能力如路由、定位、權(quán)限等能力由京東零售 mpass 團隊來提供，而原生頁面的渲染以及與基建能力的橋接則由 Taro 來負責，業(yè)務(wù)方只需要將寫好的 Taro 項目通過執(zhí)行相應(yīng)的命令，就可以將項目以模塊的形式一鍵打包到鴻蒙應(yīng)用中，最終在應(yīng)用內(nèi)渲染出對應(yīng)的原生頁面，整個過程簡單高效。

技術(shù)特點

Taro 作為一款開放式跨端跨框架解決方案，在支持開發(fā)者一套代碼多端運行的同時，也為開發(fā)鴻蒙原生應(yīng)用提供了諸多便利。在權(quán)衡多方因素后，我們最終選擇了 Taro 作為開發(fā)鴻蒙原生應(yīng)用的技術(shù)方案，總的來說，使用 Taro 來開發(fā)鴻蒙原生應(yīng)用會有下面幾點優(yōu)勢：

支持開發(fā)者使用 Web 范式來開發(fā)鴻蒙原生應(yīng)用

與鴻蒙原生開發(fā)相比，使用 Taro 進行開發(fā)的最大優(yōu)點在于 Taro 支持開發(fā)者使用前端 Web 范式來開發(fā)鴻蒙原生應(yīng)用，基于這一特點，我們對大部分 CSS 能力進行了適配：

支持常見的 CSS 樣式和布局，支持 flex、偽類和偽元素

支持常見的 CSS 定位，絕對定位、fixed 定位

支持常見的 CSS 選擇器和媒體查詢

支持常見的 CSS 單位，比如 vh、vw 以及計算屬性 calc

支持 CSS 變量以及安全區(qū)域等預(yù)定義變量

在編譯流程上，我們采用了 Rust 編寫的 LightningCSS，極大地提升了 CSS 文件的編譯和解析速度。

（圖片來自 LightningCSS 官網(wǎng)）

在運行時上，我們參考了 WebKit 瀏覽器內(nèi)核的處理流程，對于 CSS 規(guī)則的匹配和標臟進行了架構(gòu)上的升級，大幅提升了 CSS 應(yīng)用和更新的性能。

支持存量 Taro 項目的快速遷移

將現(xiàn)有業(yè)務(wù)適配到一個全新的端側(cè)平臺，無疑需要投入大量的人力物力。而 Taro 框架的主要優(yōu)勢，正是能夠有效解決這種跨端場景下的項目遷移難題。通過 Taro，我們可以以極低的成本，在保證高度還原和高性能的前提下，快速地將現(xiàn)有的 Taro 項目遷移到鴻蒙系統(tǒng)上。

渲染性能比肩原生開發(fā)

在 Taro 轉(zhuǎn)換鴻蒙原生頁面的技術(shù)實現(xiàn)上，我們摒棄了之前使用 ArkTS 原生組件遞歸渲染節(jié)點樹的方案，將更多的運行時邏輯如組件、動效、測算和布局等邏輯下沉到了 C++ 層，極大地提升了頁面的渲染性能。

另外，我們對于 Taro 項目中 CSS 樣式的處理架構(gòu)進行了一次整體的重構(gòu)和升級，并引入布局引擎Yoga，將頁面的測量和布局放在 Taro 側(cè)進行實現(xiàn)，基于這些優(yōu)化，實現(xiàn)一套高效的渲染任務(wù)管線，使得 Taro 開發(fā)的鴻蒙頁面在性能上足以和鴻蒙 ArkTS 原生頁面比肩。

支持虛擬列表和節(jié)點復(fù)用等高階功能

長列表渲染是應(yīng)用開發(fā)普遍會遇到的場景，在商品列表、訂單列表、消息列表等需要無限滾動的組件和頁面中廣泛存在，這些場景如果不進行特殊的處理，只是單純對數(shù)據(jù)進行渲染和更新，在數(shù)據(jù)量非常大的情況下，可能會引發(fā)嚴重的性能問題，導致視圖在一段時間內(nèi)無法響應(yīng)用戶操作。

在這個背景下，Taro 在鴻蒙端提供了長列表類型組件（WaterFlow & List），并對長列表類型組件進行了優(yōu)化，提供了懶加載、預(yù)加載和節(jié)點復(fù)用等功能，有效地解決大數(shù)據(jù)量下的性能問題，提高應(yīng)用的流暢度和用戶體驗。

（圖片來自 HarmonyOS 官網(wǎng)）

支持原生混合開發(fā)等多種開發(fā)模式

Taro 的組件和 API 是以小程序作為基準來進行設(shè)計的，因此在實際的鴻蒙應(yīng)用開發(fā)過程中，會出現(xiàn)所需的組件和 API 在 Taro 中不存在的情況，因為針對這種情況，Taro 提供了原生混合開發(fā)的能力，支持將原生頁面或者原生組件混合編譯到 Taro 鴻蒙項目中，支持 Taro 組件和鴻蒙原生組件在頁面上的混合使用。

性能表現(xiàn)

京東鴻蒙原生應(yīng)用性能數(shù)據(jù)

經(jīng)過對 Taro 的屢次優(yōu)化和打磨，使得京東鴻蒙原生應(yīng)用取得了優(yōu)秀的性能表現(xiàn)，最終首頁的渲染耗時 1062ms，相比于之前的 ArkTS 版本，性能提升了 23.9%；商詳?shù)匿秩竞臅r 560 ms，相比于之前的 ArkTS 版本，性能提升 74.2%。

值得注意的是商詳頁性能提升顯著，經(jīng)過分析發(fā)現(xiàn)商詳樓層眾多，CSS 樣式也復(fù)雜多樣，因此在 ArkTS 版本中，在 CSS 的解析和屬性應(yīng)用階段占用了過多的時間，在 CAPI 版本進行了CSSOM 模塊的架構(gòu)升級后，帶來了明顯的性能提升。

基于 Taro 開發(fā)的頁面，在華為性能工廠的專業(yè)測試下，大部分都以優(yōu)異的成績通過了性能驗收，充分證明了 Taro 在鴻蒙端的高性能表現(xiàn)。

總結(jié)和未來展望

Taro 目前已經(jīng)成為一個全業(yè)務(wù)域的跨端開發(fā)解決方案，實現(xiàn) Web 類（如小程序、Hybrid）和原生類（iOS、Android、鴻蒙）的一體化開發(fā)，在高性能的鴻蒙適配方案的加持下，業(yè)務(wù)能快速拓展到新興的鴻蒙系統(tǒng)中去，可以極大滿足業(yè)務(wù)集約化開發(fā)的需求。

未來計劃

后續(xù)，Taro 還會持續(xù)在性能上進行優(yōu)化，以更好地適配鴻蒙系統(tǒng)：

將開發(fā)者的 JS 業(yè)務(wù)代碼和應(yīng)用框架層的 JS 代碼與主線程的 UI 渲染邏輯分離，另起一條 JavaScript 線程，執(zhí)行這些 JS 代碼，避免上層業(yè)務(wù)邏輯堵塞主線程運行，防止頁面出現(xiàn)卡頓、丟幀的現(xiàn)象。

實現(xiàn)視圖節(jié)點拍平，將不影響布局的視圖節(jié)點進行整合，減少實際繪制上屏的頁面組件節(jié)點數(shù)量，提升頁面的渲染性能。

（圖片來自 React Native 官網(wǎng)）

實現(xiàn)原生性能級別的動態(tài)更新能力，支持開發(fā)者在不重新編譯和發(fā)布應(yīng)用的情況下，動態(tài)更新應(yīng)用中的頁面和功能。

總結(jié)

京東鴻蒙原生應(yīng)用是 Taro 打響在鴻蒙端側(cè)適配的第一槍，證明了 Taro 方案適配鴻蒙原生應(yīng)用的可行性。這標志著 Taro 在多端統(tǒng)一開發(fā)上的新突破，意味著 Taro 將為更多的企業(yè)和開發(fā)者提供優(yōu)秀的跨端解決方案，使開發(fā)者能夠以更高的效率開發(fā)出適配鴻蒙系統(tǒng)的高性能應(yīng)用。

審核編輯 黃宇