作者；京東零售 李偉濤

背景

純血鴻蒙逐漸成為全球第三大操作系統(tǒng)，業(yè)界也掀起了適配鴻蒙原生的浪潮，用戶(hù)遷移趨勢(shì)明顯，京東作為國(guó)民應(yīng)用，為鴻蒙用戶(hù)提供完整的購(gòu)物體驗(yàn)至關(guān)重要。

去年 9 月，京東 APP 純血鴻蒙 在鴻蒙應(yīng)用商城正式上線(xiàn)，APP 中核心購(gòu)物鏈路，如首頁(yè)、搜索、商詳、購(gòu)物車(chē)、訂單、結(jié)算和我京等頁(yè)面，都是通過(guò) Taro on Harmony 方案進(jìn)行開(kāi)發(fā)，并且一上線(xiàn)就獲得了華為的 S 級(jí)應(yīng)用認(rèn)證。

Taro 介紹

Taro 是由京東發(fā)起并維護(hù)的開(kāi)放式跨端跨框架解決方案，支持以 Web 的開(kāi)發(fā)范式來(lái)實(shí)現(xiàn)小程序、H5、原生 APP 的跨端統(tǒng)一開(kāi)發(fā)，從 18 年開(kāi)源至今，在 GitHub 已累計(jì)獲得 36,000+ Stars。

在過(guò)去的一年中，Taro 完成了鴻蒙適配方案的開(kāi)發(fā)，Taro on Harmony 方案支持開(kāi)發(fā)者使用 React DSL 來(lái)快速開(kāi)發(fā)高性能原生鴻蒙應(yīng)用，讓 Taro 具備了一份代碼同時(shí)跨鴻蒙、小程序、H5、React Native 多端的能力，可以讓開(kāi)發(fā)者以熟悉的方式來(lái)開(kāi)發(fā)鴻蒙應(yīng)用，大幅降低鴻蒙開(kāi)發(fā)門(mén)檻，并且存量的 Taro 業(yè)務(wù)也能快速轉(zhuǎn)成鴻蒙原生應(yīng)用，可以節(jié)約大量研發(fā)成本。

Taro on Harmony 適配方案的演進(jìn)

基于 ArkTS 的初始版本

Taro 適配鴻蒙方案經(jīng)過(guò)了多個(gè)版本的演進(jìn)迭代，最初版本我們采用的是對(duì)接到鴻蒙原生 ArkTS 語(yǔ)言的方式來(lái)實(shí)現(xiàn)，這和 Taro 適配微信小程序的方案類(lèi)似，都是通過(guò)模擬瀏覽器 DOM/BOM 環(huán)境，然后運(yùn)行 React 代碼構(gòu)建出虛擬 DOM 樹(shù)，再將虛擬 DOM 樹(shù)以遞歸遍歷的方式構(gòu)建出宿主環(huán)境（小程序/鴻蒙）的渲染節(jié)點(diǎn)樹(shù)，從而實(shí)現(xiàn)頁(yè)面渲染。

但這個(gè)方案的缺陷非常明顯，那就是在 ArkTS 之上再橋接一層轉(zhuǎn)換，導(dǎo)致性能相比原生存在一定差異，并且這個(gè)差異幾乎沒(méi)有辦法可以抹平。

基于 C API 的全新版本

恰逢此時(shí)，鴻蒙為了方便三方框架與應(yīng)用接入鴻蒙生態(tài)，在官方開(kāi)發(fā)語(yǔ)言 ArkTS 之外，開(kāi)放了更底層 C API 能力，提供了 C++ 層的 UI 節(jié)點(diǎn)創(chuàng)建、屬性設(shè)置等能力（類(lèi)似于 C++ 版本的 DOM），三方框架和應(yīng)用可以基于 C API 構(gòu)建高性能的解決方案和應(yīng)用。

C API 就是 Taro 想要的能力，與 Taro 的架構(gòu)完美契合，Taro React 構(gòu)建出來(lái)的虛擬 DOM 樹(shù)可以通過(guò) C API 直接去創(chuàng)建原生 UI 節(jié)點(diǎn)，省去了很多流程環(huán)節(jié)，并且可以將我們大部分的渲染管線(xiàn)處理沉到 C++ 中去，獲得飛躍式的性能提升，所以基于 C API 我們首先設(shè)計(jì)并開(kāi)發(fā)了單線(xiàn)程架構(gòu)版本。

單線(xiàn)程架構(gòu)版本

單線(xiàn)程架構(gòu)版本的示意圖如下，整個(gè)渲染過(guò)程均在主線(xiàn)程實(shí)現(xiàn)，業(yè)務(wù)代碼在 ArkVM 中執(zhí)行獲得虛擬 DOM 樹(shù)，同時(shí)讀取樣式數(shù)據(jù)，通過(guò) React Reconciler ，在構(gòu)建虛擬樹(shù)時(shí)會(huì)調(diào)用 NAPI 在 C++ 側(cè)構(gòu)建出對(duì)應(yīng)的 Element Tree，同時(shí)也會(huì)進(jìn)行樣式數(shù)據(jù)的解析處理，從而構(gòu)建出 CSSOM 對(duì)象，Element Tree 和 CSSOM 對(duì)象會(huì)進(jìn)行匹配從而構(gòu)建出帶有樣式的 Render Tree，在這一步也會(huì)同時(shí)創(chuàng)建 yoga 節(jié)點(diǎn)，進(jìn)行布局計(jì)算，最后會(huì)再基于布局計(jì)算的結(jié)果生成 C API 的 ArkNode Tree，從而實(shí)現(xiàn)上屏渲染。

目前京東鴻蒙 APP 中首頁(yè)、搜推、我京、核心購(gòu)物流程均是使用 Taro 單線(xiàn)程版本進(jìn)行開(kāi)發(fā)，性能和穩(wěn)定性位于第一梯隊(duì)。

多線(xiàn)程架構(gòu)版本

單線(xiàn)程版本上線(xiàn)之后，我們也發(fā)現(xiàn)了單線(xiàn)程架構(gòu)的不足，① 從業(yè)務(wù)代碼的執(zhí)行到渲染流程的處理都發(fā)生在主線(xiàn)程上，這導(dǎo)致了主線(xiàn)程的過(guò)載，使得應(yīng)用無(wú)法及時(shí)響應(yīng)用戶(hù)的操作，從而引發(fā)了用戶(hù)體驗(yàn)上的卡頓，隨著業(yè)務(wù)邏輯的增加和復(fù)雜性的提升，這種卡頓現(xiàn)象會(huì)越發(fā)明顯；② 在單線(xiàn)程架構(gòu)下，代碼都是需要內(nèi)置到應(yīng)用包里，這樣就無(wú)法實(shí)現(xiàn)業(yè)務(wù)代碼的動(dòng)態(tài)下發(fā)更新。

所以，為了解決以上問(wèn)題，進(jìn)一步提升應(yīng)用性能，和應(yīng)對(duì)未來(lái)更多業(yè)務(wù)場(chǎng)景需求的可能性，我們實(shí)現(xiàn)了多線(xiàn)程架構(gòu)。

相較于單線(xiàn)程架構(gòu)，多線(xiàn)程架構(gòu)將整個(gè)業(yè)務(wù)代碼執(zhí)行和渲染的過(guò)程拆分到了三個(gè)線(xiàn)程，每個(gè)線(xiàn)程各司其職，讓任務(wù)的執(zhí)行更加合理，不會(huì)造成主線(xiàn)程的堵塞，這樣的架構(gòu)主要帶來(lái)三個(gè)好處。

1.業(yè)務(wù)邏輯不再堵塞主流程，完全剝離到了單獨(dú)的線(xiàn)程執(zhí)行，之前容易出現(xiàn)卡頓、甚至 APP Freeze 的頁(yè)面基本不再有問(wèn)題，例如商詳接入之后滑動(dòng)頁(yè)面變得更加流暢；

2.動(dòng)畫(huà)執(zhí)行和渲染不再卡頓，動(dòng)畫(huà)的執(zhí)行交由 Background 線(xiàn)程管控，不再和 JS 線(xiàn)程有沖突問(wèn)題，動(dòng)畫(huà)支持滿(mǎn)幀渲染；

3.支持動(dòng)態(tài)化的能力，在性能上可以與原生相媲美，同時(shí)還能支持動(dòng)態(tài)下發(fā)，支持更新遠(yuǎn)端 JS 資源來(lái)實(shí)現(xiàn) APP 內(nèi)容的更新，讓業(yè)務(wù)具備快速驗(yàn)證和免發(fā)版的能力。

目前多線(xiàn)程版本正在我們的業(yè)務(wù)中進(jìn)行試點(diǎn)接入，很快就會(huì)正式上線(xiàn)。

Taro on Harmony 方案特性

豐富的能力支持

常用組件和 API 支持

在 C-API 版本的 Taro For Harmony 中，我們不僅完整支持了 React 18+，另外支持了 View、Text、Image、Video 等近 33 個(gè) Taro 組件，對(duì)于常用的 API，如 getSystemInfo、getStorage 等也是在 C-API 版本中得到了完整的支持，而且針對(duì)邏輯較為復(fù)雜的 API 如：createSelectorQuery 以及 createIntersectionObserver，我們將這些 API 在 C++ 側(cè)進(jìn)行了重新的實(shí)現(xiàn)，大幅提升了他們的執(zhí)行性能。

常用樣式支持

在 C-API 版本中，我們對(duì)支持了大部分常見(jiàn)的 CSS 能力：

?支持常見(jiàn)的 CSS 樣式和布局，支持 flex、偽類(lèi)和偽元素

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

?支持常見(jiàn)的 CSS 選擇器和媒體查詢(xún)

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

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

同時(shí)，我們參考瀏覽器 CSSOM 的實(shí)現(xiàn)方式，在 C++ 實(shí)現(xiàn)了一套 CSSOM 邏輯，里面包含了樣式解析、樣式匹配、樣式合成和應(yīng)用整個(gè)鏈路的樣式處理邏輯。

另外，Taro 引入了 Yoga 布局引擎來(lái)計(jì)算渲染節(jié)點(diǎn)的位置和大小，最大程度保證 Taro 構(gòu)建出來(lái)的鴻蒙應(yīng)用中渲染樣式和 W3C 規(guī)范的一致性。

媲美原生 ArkTS 的高性能

運(yùn)行時(shí)邏輯下沉至 C++

在 C-API 的版本中，我們將 ArkVM 層的 Taro 運(yùn)行時(shí)內(nèi)容削減到極致的薄，將 TaroElement 的大部分內(nèi)容都下沉到了 C++ 側(cè)，并在 ArkVM 層取消了他們之間父子關(guān)系的綁定，極大地提升了 TaroElement 相關(guān)邏輯的性能。

另一方面，在 C++ 側(cè) Taro 會(huì)指令式地調(diào)用 ArkUI 在 C++ 側(cè)提供的 API，來(lái)高效地創(chuàng)建節(jié)點(diǎn)、設(shè)置屬性、綁定事件以及繪制上屏。

提供長(zhǎng)列表組件應(yīng)對(duì)長(zhǎng)列表場(chǎng)景

Taro 還針對(duì)長(zhǎng)列表場(chǎng)景針對(duì)性地提供了長(zhǎng)列表類(lèi)型組件，并對(duì)長(zhǎng)列表類(lèi)型組件進(jìn)行了優(yōu)化，提供了懶加載、預(yù)加載和節(jié)點(diǎn)復(fù)用等功能，有效地解決大數(shù)據(jù)量下的性能問(wèn)題，提高應(yīng)用的流暢度和用戶(hù)體驗(yàn)。

支持 C API 混合原生的渲染模式

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

總結(jié)

Taro 鴻蒙方案基于鴻蒙 CAPI 進(jìn)行構(gòu)建，實(shí)現(xiàn)了將 React DSL 直接對(duì)接到 C++ 側(cè)來(lái)運(yùn)行整體渲染管線(xiàn)，從而實(shí)現(xiàn)了與原生齊平的渲染性能，同時(shí) Taro 鴻蒙方案是多線(xiàn)程架構(gòu)的方案，在應(yīng)用渲染性能、操作響應(yīng)時(shí)延上都在業(yè)界做到極致，并且 Taro 鴻蒙方案支持動(dòng)態(tài)更新，是行業(yè)首創(chuàng)且經(jīng)過(guò)大規(guī)模 APP 應(yīng)用場(chǎng)景驗(yàn)證的開(kāi)發(fā)框架，綜合性能、生態(tài)以及開(kāi)發(fā)體驗(yàn)來(lái)講，毫無(wú)疑問(wèn)已經(jīng)成為了開(kāi)發(fā)鴻蒙應(yīng)用的最佳框架選型之一。

目前，我們也仍然在不斷完善著鴻蒙的適配方案，目前在渲染性能提升方面我們正在進(jìn)行 React C++ 化的探索，整體進(jìn)展也已經(jīng)處于驗(yàn)證和測(cè)試階段，同時(shí)也在進(jìn)行自研布局引擎的探索，在進(jìn)一步提升渲染性能的同時(shí)，為業(yè)務(wù)提供更豐富的樣式寫(xiě)法支持；此外，在開(kāi)發(fā)效率提升方面，我們也正在進(jìn)行開(kāi)發(fā)調(diào)試工具的探索開(kāi)發(fā)，為業(yè)務(wù)提供熱重載、源碼定位、斷點(diǎn)調(diào)試、元素審查等能力，提升效率和開(kāi)發(fā)體驗(yàn)。

在近期，我們會(huì)將已經(jīng)在京東鴻蒙 APP 久經(jīng)考驗(yàn)的單線(xiàn)程架構(gòu)版本開(kāi)源出來(lái)，為開(kāi)源社區(qū)貢獻(xiàn)一份力量，為鴻蒙應(yīng)用生態(tài)的豐富注入強(qiáng)大的動(dòng)力。

審核編輯 黃宇