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