腾讯 Kuikly 框架进一步开源，新增支持 Web，开启一码五端新体验！

作者: 腾讯 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

Kuikly 框架属于腾讯端服务联盟重要成员，欢迎关注及了解更多信息：

腾讯端服务官网：

https://tds.qq.com/

TDS Framework 官网：

https://framework.tds.qq.com/