京東鴻蒙上線前瞻——使用 Taro 打造高性能原生應(yīng)用

背景

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

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

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

技術(shù)方案

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

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

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

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

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

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

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

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

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

技術(shù)特點(diǎn)

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

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

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

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

支持常見的 CSS 定位，絕對(duì)定位、fixed 定位

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

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

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

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

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

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

支持存量 Taro 項(xiàng)目的快速遷移

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

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

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

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

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

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

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

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

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

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

性能表現(xiàn)

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

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

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

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

總結(jié)和未來(lái)展望

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

未來(lái)計(jì)劃

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

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

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

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

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

總結(jié)

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

審核編輯 黃宇