騰訊Kuikly框架進(jìn)一步開(kāi)源，新增支持Web，開(kāi)啟一碼五端新體驗(yàn)！

砍柴網(wǎng) ? 6天前掃碼分享

我是創(chuàng)始人李巖：很抱歉！給自己產(chǎn)品做個(gè)廣告，點(diǎn)擊進(jìn)來(lái)看看。

作者:?騰訊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)行效果如下

騰訊Kuikly框架進(jìn)一步開(kāi)源，新增支持Web，開(kāi)啟一碼五端新體驗(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。

騰訊Kuikly框架進(jìn)一步開(kāi)源，新增支持Web，開(kāi)啟一碼五端新體驗(yàn)！

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ì)比

騰訊Kuikly框架進(jìn)一步開(kāi)源，新增支持Web，開(kāi)啟一碼五端新體驗(yàn)！

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)畫/列表/文本測(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)畫，滾動(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)化。如下圖：