作者: 騰訊QQ游戲中心 謝易成

一、背景

Kuikly是騰訊廣泛應用的跨端開發框架，基于Kotlin Multiplatform技術構建，為開發者提供了技術棧更統一的跨端開發體驗，由騰訊大前端領域 Oteam(公司級)推出。目前已有20+業務深度使用，頁面數1000+，日活用戶超5億，滿足了這些業務在眾多場景下的各類復雜需求(應用場景案例)。Kuikly 作為騰訊端服務聯盟(tds.qq.com)的重要成員，將持續推動跨端開發的技術創新和生態建設。

本次在Android、iOS、鴻蒙開源基礎上，將新增開源Web版，支持H5和微信小程序，進一步擴展多端適配場景。Kuikly適配的H5和微信小程序已接入騰訊多款業務，如搜狗輸入法、鵝毛市集、QQ小游戲等。

二、效果展示

Kuikly Web版在H5和微信小程序上已經實現了絕大多數核心組件能力，運行效果如下

三、主流方案對比

Kuikly是基于客戶端技術棧設計，在支持Android、iOS、鴻蒙高性能跨端的基礎上，拓展支持H5和小程序，以達到更多端的復用。這與一些業界跨端框架定位是類似的，如 Flutter、Compose Multiplatform 等。

我們從其中挑選了兩個框架，從多個維度與它們對比在H5與微信小程序場景下的差異。

3.1 產物大小

在H5平臺上，三個框架編譯產物大小差別很大，Kuikly包體積優勢明顯。

業界基于終端技術棧的跨端方案，都是通過自繪引擎，通過 WASM 技術運行在瀏覽器上，編譯后產物體積很大。

Kuikly Web使用DOM渲染方案，不依賴第三方產物，產物遠小于其他框架，只有463KB。

3.2 頁面加載速度

我們在iOS，Android和PC瀏覽器環境進行性能測試(運行Hello World Demo)，Kuikly在三個瀏覽器環境下加載速度都是最快的。

3.2.1 iOS加載速度對比

3.2.2 Android加載速度對比

3.2.3 PC 性能數據對比

在MacBook Pro M4Pro 電腦的Chrome瀏覽器(138.0.7204.158)上，我們使用開發者工具上進行了詳細的性能測試。測出Kuikly的FCP耗時僅為87.76ms，不到其他框架的一半。

3.3 其他優勢

在H5平臺上與主流跨端框架對比，Kuikly還具有以下優勢：

開發體驗: Android Studio 完善的開發支持。

代碼調試: 可直接調試JS或通過SourceMap調試Kotlin。

SEO友好: 采用DOM渲染，傳統的SEO優化都可以生效。

兼容性好: 僅依賴ES6和CSS3特性，大部分設備都支持。

生態復用: 編譯產物是JS，采用DOM渲染方案，可通過Kuikly自定義擴展復用React等H5生態庫。

3.4 微信小程序支持

主流的基于終端技術棧的跨端框架，缺少官方微信小程序運行方案支持，Kuikly Web版微信小程序的出現填補了這部分空白。

四、整體技術方案

1.Kuikly的架構設計回顧

簡單回歸一下Kuikly的整體架構，跨端Core層處理框架核心邏輯，Render層負責不同平臺渲染。新平臺接入Kuikly需要實現自己的Render層

2.Kuikly Web版本整體方案設計

在進行Kuikly Web版H5和微信小程序適配工作時，我們發現許多代碼可以共用，因此我們抽象了一個Web容器運行時作為適配層，這個適配層依賴抽象的DOM API、KuiklyWindow、Kuiklydocument，實現了絕大部分Render邏輯。

2.1 Web容器運行時

通過抽象核心接口構建Web容器運行時，我們實現了以下能力：

將Kuikly的UI操作轉換為標準DOM操作

為差異化模塊(動畫/列表/文本測量等)提供擴展接口

支持JS宿主通過實現Web容器運行時接口，接入Kuikly

2.2 H5運行時

瀏覽器提供了標準的DOM，Window，document。Kuikly適配H5時只需實現動畫，滾動列表，文本測量等少部分 Web容器運行時拓展接口。

2.3 微信小程序運行時

在適配微信小程序之前，我們調研了目前支持微信小程序的跨端框架。這些框架基本都是基于前端技術，在微信小程序上基本采用編譯時或者運行時方案，最終都是數據驅動模板完成UI渲染。如下圖：

我們借鑒了業界主流小程序框架Tarojs和Kbone的思路，結合Kuikly框架的特點，通過實現Web容器運行時接口，提供輕量級DOM和拓展接口實現，僅實現Kuikly需要的能力，并做了一系列針對Kuikly渲染流程的優化。如下圖：

目前Kuikly適配微信小程序的方案在性能上仍有不少優化空間，后續我們會探索編譯Kuikly產物為WASM, 使用預編譯等方式優化Kuikly在微信小程序平臺的體驗

五、技術展望

繼續對Kuikly Web版進行性能優化，使用預編譯進一步提升小程序性能，同時減少編譯產物大小。

探索使用WASM提升計算密集型任務的執行效率，優化Kuikly Web版的使用體驗

擴大Kuikly Web版支持范圍，下半年將開源Electron環境的適配

立即體驗 Kuikly，加入開源社區。

Github 倉庫 |  https://kuikly.tds.qq.com

騰訊端服務官網：

TDS framework官網：