背景

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

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

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

技術方案

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

在技術選型方面，開發一個鴻蒙原生應用，一般會有兩種選擇：

使用原生 ArkTS 進行鴻蒙開發

使用跨端框架進行鴻蒙開發

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

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

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

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

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

技術特點

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

支持開發者使用 Web 范式來開發鴻蒙原生應用

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

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

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

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

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

支持 CSS 變量以及安全區域等預定義變量

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

（圖片來自 LightningCSS 官網）

在運行時上，我們參考了 WebKit 瀏覽器內核的處理流程，對于 CSS 規則的匹配和標臟進行了架構上的升級，大幅提升了 CSS 應用和更新的性能。

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

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

渲染性能比肩原生開發

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

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

支持虛擬列表和節點復用等高階功能

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

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

（圖片來自 HarmonyOS 官網）

支持原生混合開發等多種開發模式

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

性能表現

京東鴻蒙原生應用性能數據

經過對 Taro 的屢次優化和打磨，使得京東鴻蒙原生應用取得了優秀的性能表現，最終首頁的渲染耗時 1062ms，相比于之前的 ArkTS 版本，性能提升了 23.9%；商詳的渲染耗時 560 ms，相比于之前的 ArkTS 版本，性能提升 74.2%。

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

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

總結和未來展望

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

未來計劃

后續，Taro 還會持續在性能上進行優化，以更好地適配鴻蒙系統：

將開發者的 JS 業務代碼和應用框架層的 JS 代碼與主線程的 UI 渲染邏輯分離，另起一條 JavaScript 線程，執行這些 JS 代碼，避免上層業務邏輯堵塞主線程運行，防止頁面出現卡頓、丟幀的現象。

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

（圖片來自 React Native 官網）

實現原生性能級別的動態更新能力，支持開發者在不重新編譯和發布應用的情況下，動態更新應用中的頁面和功能。

總結

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

審核編輯 黃宇