作者: 騰訊 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 環境的適配
