作者: 騰訊QQ游戲中心 謝易成
一、背景
Kuikly是騰訊廣泛應(yīng)用的跨端開(kāi)發(fā)框架，基于Kotlin Multiplatform技術(shù)構(gòu)建，為開(kāi)發(fā)者提供了技術(shù)棧更統(tǒng)一的跨端開(kāi)發(fā)體驗(yàn)，由騰訊大前端領(lǐng)域 Oteam（公司級(jí)）推出。目前已有20+業(yè)務(wù)深度使用，頁(yè)面數(shù)1000+，日活用戶超5億，滿足了這些業(yè)務(wù)在眾多場(chǎng)景下的各類復(fù)雜需求（應(yīng)用場(chǎng)景案例）。Kuikly 作為騰訊端服務(wù)聯(lián)盟的重要成員，將持續(xù)推動(dòng)跨端開(kāi)發(fā)的技術(shù)創(chuàng)新和生態(tài)建設(shè)。
本次在Android、iOS、鴻蒙開(kāi)源基礎(chǔ)上，將新增開(kāi)源Web版，支持H5和微信小程序，進(jìn)一步擴(kuò)展多端適配場(chǎng)景。Kuikly適配的H5和微信小程序已接入騰訊多款業(yè)務(wù)，如搜狗輸入法、鵝毛市集、QQ小游戲等。
二、效果展示
Kuikly Web版在H5和微信小程序上已經(jīng)實(shí)現(xiàn)了絕大多數(shù)核心組件能力，運(yùn)行效果如下
三、主流方案對(duì)比
Kuikly是基于客戶端技術(shù)棧設(shè)計(jì)，在支持Android、iOS、鴻蒙高性能跨端的基礎(chǔ)上，拓展支持H5和小程序，以達(dá)到更多端的復(fù)用。這與一些業(yè)界跨端框架定位是類似的，如 Flutter、Compose Multiplatform 等。
我們從其中挑選了兩個(gè)框架，從多個(gè)維度與它們對(duì)比在H5與微信小程序場(chǎng)景下的差異。
3.1 產(chǎn)物大小
在H5平臺(tái)上，三個(gè)框架編譯產(chǎn)物大小差別很大，Kuikly包體積優(yōu)勢(shì)明顯。
業(yè)界基于終端技術(shù)棧的跨端方案，都是通過(guò)自繪引擎，通過(guò) WASM 技術(shù)運(yùn)行在瀏覽器上，編譯后產(chǎn)物體積很大。
Kuikly Web使用DOM渲染方案，不依賴第三方產(chǎn)物，產(chǎn)物遠(yuǎn)小于其他框架，只有463KB。
3.2 頁(yè)面加載速度
我們?cè)趇OS，Android和PC瀏覽器環(huán)境進(jìn)行性能測(cè)試(運(yùn)行Hello World Demo)，Kuikly在三個(gè)瀏覽器環(huán)境下加載速度都是最快的。
3.2.1 iOS加載速度對(duì)比
3.2.2 Android加載速度對(duì)比
3.2.3 PC 性能數(shù)據(jù)對(duì)比
在MacBook Pro M4Pro 電腦的Chrome瀏覽器(138.0.7204.158)上，我們使用開(kāi)發(fā)者工具上進(jìn)行了詳細(xì)的性能測(cè)試。測(cè)出Kuikly的FCP耗時(shí)僅為87.76ms，不到其他框架的一半。
3.3 其他優(yōu)勢(shì)
在H5平臺(tái)上與主流跨端框架對(duì)比，Kuikly還具有以下優(yōu)勢(shì)：
開(kāi)發(fā)體驗(yàn): Android Studio 完善的開(kāi)發(fā)支持。
代碼調(diào)試: 可直接調(diào)試JS或通過(guò)SourceMap調(diào)試Kotlin。
SEO友好: 采用DOM渲染，傳統(tǒng)的SEO優(yōu)化都可以生效。
兼容性好: 僅依賴ES6和CSS3特性，大部分設(shè)備都支持。
生態(tài)復(fù)用: 編譯產(chǎn)物是JS，采用DOM渲染方案，可通過(guò)Kuikly自定義擴(kuò)展復(fù)用React等H5生態(tài)庫(kù)。
3.4 微信小程序支持
主流的基于終端技術(shù)棧的跨端框架，缺少官方微信小程序運(yùn)行方案支持，Kuikly Web版微信小程序的出現(xiàn)填補(bǔ)了這部分空白。
四、整體技術(shù)方案
1.Kuikly的架構(gòu)設(shè)計(jì)回顧
簡(jiǎn)單回歸一下Kuikly的整體架構(gòu)，跨端Core層處理框架核心邏輯，Render層負(fù)責(zé)不同平臺(tái)渲染。新平臺(tái)接入Kuikly需要實(shí)現(xiàn)自己的Render層
2.Kuikly Web版本整體方案設(shè)計(jì)
在進(jìn)行Kuikly Web版H5和微信小程序適配工作時(shí)，我們發(fā)現(xiàn)許多代碼可以共用，因此我們抽象了一個(gè)Web容器運(yùn)行時(shí)作為適配層，這個(gè)適配層依賴抽象的DOM API、KuiklyWindow、KuiklyDocument，實(shí)現(xiàn)了絕大部分Render邏輯。
2.1 Web容器運(yùn)行時(shí)
通過(guò)抽象核心接口構(gòu)建Web容器運(yùn)行時(shí)，我們實(shí)現(xiàn)了以下能力：
將Kuikly的UI操作轉(zhuǎn)換為標(biāo)準(zhǔn)DOM操作
為差異化模塊（動(dòng)畫(huà)/列表/文本測(cè)量等）提供擴(kuò)展接口
支持JS宿主通過(guò)實(shí)現(xiàn)Web容器運(yùn)行時(shí)接口，接入Kuikly
2.2 H5運(yùn)行時(shí)
瀏覽器提供了標(biāo)準(zhǔn)的DOM，Window，Document。Kuikly適配H5時(shí)只需實(shí)現(xiàn)動(dòng)畫(huà)，滾動(dòng)列表，文本測(cè)量等少部分 Web容器運(yùn)行時(shí)拓展接口。
2.3 微信小程序運(yùn)行時(shí)
在適配微信小程序之前，我們調(diào)研了目前支持微信小程序的跨端框架。這些框架基本都是基于前端技術(shù)，在微信小程序上基本采用編譯時(shí)或者運(yùn)行時(shí)方案，最終都是數(shù)據(jù)驅(qū)動(dòng)模板完成UI渲染。如下圖：
我們借鑒了業(yè)界主流小程序框架Tarojs和Kbone的思路，結(jié)合Kuikly框架的特點(diǎn)，通過(guò)實(shí)現(xiàn)Web容器運(yùn)行時(shí)接口，提供輕量級(jí)DOM和拓展接口實(shí)現(xiàn)，僅實(shí)現(xiàn)Kuikly需要的能力，并做了一系列針對(duì)Kuikly渲染流程的優(yōu)化。如下圖：
目前Kuikly適配微信小程序的方案在性能上仍有不少優(yōu)化空間，后續(xù)我們會(huì)探索編譯Kuikly產(chǎn)物為WASM, 使用預(yù)編譯等方式優(yōu)化Kuikly在微信小程序平臺(tái)的體驗(yàn)
五、技術(shù)展望
繼續(xù)對(duì)Kuikly Web版進(jìn)行性能優(yōu)化，使用預(yù)編譯進(jìn)一步提升小程序性能，同時(shí)減少編譯產(chǎn)物大小。
探索使用WASM提升計(jì)算密集型任務(wù)的執(zhí)行效率，優(yōu)化Kuikly Web版的使用體驗(yàn)
擴(kuò)大Kuikly Web版支持范圍，下半年將開(kāi)源Electron環(huán)境的適配
