一区二区在线看,亚洲成人a√

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

一、背景

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

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

二、效果展示

Kuikly Web版在H5和微信小程序上已經(jīng)實(shí)現(xiàn)了絕大多數(shù)核心組件能力，運(yùn)行效果如下

三、主流方案對比

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

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

3.1 產(chǎn)物大小

在H5平臺上，三個框架編譯產(chǎn)物大小差別很大，Kuikly包體積優(yōu)勢明顯。

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

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

3.2 頁面加載速度

我們在iOS，Android和PC瀏覽器環(huán)境進(jìn)行性能測試(運(yù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ā)者工具上進(jìn)行了詳細(xì)的性能測試。測出Kuikly的FCP耗時僅為87.76ms，不到其他框架的一半。

3.3 其他優(yōu)勢

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

開發(fā)體驗(yàn): Android Studio 完善的開發(fā)支持。

代碼調(diào)試: 可直接調(diào)試JS或通過SourceMap調(diào)試Kotlin。

SEO友好: 采用DOM渲染，傳統(tǒng)的SEO優(yōu)化都可以生效。

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

生態(tài)復(fù)用: 編譯產(chǎn)物是JS，采用DOM渲染方案，可通過Kuikly自定義擴(kuò)展復(fù)用React等H5生態(tài)庫。

3.4 微信小程序支持

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

四、整體技術(shù)方案

1.Kuikly的架構(gòu)設(shè)計回顧

簡單回歸一下Kuikly的整體架構(gòu)，跨端Core層處理框架核心邏輯，Render層負(fù)責(zé)不同平臺渲染。新平臺接入Kuikly需要實(shí)現(xiàn)自己的Render層

2.Kuikly Web版本整體方案設(shè)計

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

2.1 Web容器運(yùn)行時

通過抽象核心接口構(gòu)建Web容器運(yùn)行時，我們實(shí)現(xiàn)了以下能力：

將Kuikly的UI操作轉(zhuǎn)換為標(biāo)準(zhǔn)DOM操作

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

支持JS宿主通過實(shí)現(xiàn)Web容器運(yùn)行時接口，接入Kuikly

2.2 H5運(yùn)行時

瀏覽器提供了標(biāo)準(zhǔn)的DOM，Window，Document。Kuikly適配H5時只需實(shí)現(xiàn)動畫，滾動列表，文本測量等少部分 Web容器運(yùn)行時拓展接口。

2.3 微信小程序運(yùn)行時

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

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

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

五、技術(shù)展望

繼續(xù)對Kuikly Web版進(jìn)行性能優(yōu)化，使用預(yù)編譯進(jìn)一步提升小程序性能，同時減少編譯產(chǎn)物大小。

探索使用WASM提升計算密集型任務(wù)的執(zhí)行效率，優(yōu)化Kuikly Web版的使用體驗(yàn)

擴(kuò)大Kuikly Web版支持范圍，下半年將開源Electron環(huán)境的適配

🚀 立即體驗(yàn) Kuikly，加入開源社區(qū)。

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

Kuikly框架屬于騰訊端服務(wù)聯(lián)盟重要成員，歡迎關(guān)注及了解更多信息：

騰訊端服務(wù)官網(wǎng)：

https://tds.qq.com/

TDS Framework官網(wǎng)：

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

　　8月15日，2025移動智能終端生態(tài)聯(lián)盟開發(fā)者沙龍在上海舉辦，泰爾終端實(shí)驗(yàn)室與谷歌專家代表應(yīng)邀出席�！　�，金標(biāo)聯(lián)盟成員OPPO、vivo、小米、榮耀聯(lián)合發(fā)布了全新隱私權(quán)>>>詳細(xì)閱讀

本文標(biāo)題：騰訊Kuikly框架進(jìn)一步開源，新增支持Web，開啟一碼五端新體驗(yàn)！

地址：http://www.sh-jijian.com/a/guandian/yejie/315243.html

1/2 1 2 下一頁

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

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