Cube 小程序技術(shù)詳解 | Cube 技術(shù)解讀
編者按：本文為《Cube 技術(shù)解讀》系列第三篇文章，作者是螞蟻集團(tuán)客戶端工程師恒實(shí)，重點(diǎn)介紹 Cube 小程序技術(shù)棧與技術(shù)演進(jìn)實(shí)踐，歡迎查閱～
? Cube 技術(shù)解讀系列文章：
第一篇：支付寶新一代動(dòng)態(tài)化技術(shù)架構(gòu)與選型綜述 | Cube 技術(shù)解讀
第二篇：Cube 卡片技術(shù)棧詳解 | Cube 技術(shù)解讀
第三篇：本篇
第四篇：Cube 渲染設(shè)計(jì)的前世今生 | Cube 技術(shù)解讀
第五篇：文本布局性能提升 60%，Inline Text 技術(shù)原理與實(shí)現(xiàn) | Cube 技術(shù)解讀
第六篇：大屏小程序探索實(shí)踐 | Cube 技術(shù)解讀
小程序作為動(dòng)態(tài)化或者跨端開(kāi)發(fā)的一種技術(shù)棧，在業(yè)界成為事實(shí)標(biāo)準(zhǔn)。Cube 作為一種輕量級(jí)小程序技術(shù)棧，具有體積小、啟動(dòng)快、內(nèi)存占用低等特點(diǎn)，也比較適合“即用即走”的小程序場(chǎng)景。以下將重點(diǎn)介紹 Cube 小程序技術(shù)棧與技術(shù)演進(jìn)實(shí)踐（若無(wú)特殊說(shuō)明，所有的數(shù)據(jù)和圖表都是針對(duì)小程序）。
Cube 渲染小程序
模塊組成
小程序視角，Cube 渲染引擎主要由以下模塊組成：
Components：主要是小程序規(guī)范里的組件；
Layout：支持 Inline，Block，F(xiàn)lex，Inline-Block，Inline-Flex 等多種布局方式，還包括文本分詞，斷行等計(jì)算；
Style：支持樣式解析，樣式匹配，樣式繼承，偽類和偽元素等多種選擇器；
Rendering：管理渲染相關(guān) Render Tree，圖片資源請(qǐng)求調(diào)度等；
Animation：JS 和 CSS 動(dòng)畫(huà)實(shí)現(xiàn)；
JS Bridge：和 JS 引擎橋接；
JS Engine：目前支持 V8，JSC，QuickJS；其中 Android 下支持 V8，QuickJS；
Compositor：用于動(dòng)畫(huà)和圖層的合成器（開(kāi)發(fā)中）。
線程模型
Cube 小程序技術(shù)棧內(nèi)部有這么幾個(gè)線程：Bridge，Layout，Render，Paint，UI 等。
Bridge?線程：執(zhí)行 JS；與 AppX 橋接的類 DOM 的 JSAPI；處理 JS 相關(guān)事件；
Layout?線程：布局計(jì)算；樣式計(jì)算與匹配；維護(hù) Layout Tree；
Render?線程：維護(hù) Render Tree；綁定數(shù)據(jù)；分層；
Paint?線程：生成繪制命令；
UI?線程：平臺(tái)事件分發(fā)；UI 布局。
小結(jié)：
并行布局，異步繪制：這里的并行是指 JS 執(zhí)行，Layout 布局 以及 Render 三者完全并行處理。由于 Layout 和 Render，Paint 等不在一個(gè)線程，因此是異步繪制；
多個(gè)線程協(xié)同工作，有點(diǎn)像 CPU 的 5 級(jí)流水線。
值得注意得是：Web 渲染引擎有個(gè)特點(diǎn)就是和 Node 相關(guān)的 DOM 操作必須和 JS 在一個(gè)線程。這就導(dǎo)致解析 HTML，布局，樣式計(jì)算，DOM，JS （包括垃圾回收）都在一個(gè)線程里。帶來(lái)的后果就是只有解析完文檔才能看到 UI 效果，這也是 Web 渲染小程序白屏?xí)r間較長(zhǎng)的一個(gè)原因。
Cube小程序技術(shù)棧，將“DOM操作” 和 JS 執(zhí)行解耦。因此 JS 的 GC 不會(huì)影響 UI 呈現(xiàn)。這種實(shí)現(xiàn)對(duì)于加快小程序啟動(dòng)非常有幫助。由于布局計(jì)算和 JS 執(zhí)行也解開(kāi)耦合，因此一般不會(huì)由于 JS 執(zhí)行阻塞 UI 交互。
Cube 小程序技術(shù)棧的特點(diǎn)
體積小，啟動(dòng)快：主 so 只有 2.8 MB（如果包括 Ariver，AppX，InsideSDK，整體小程序技術(shù)棧最小是 5.7MB）。另外可以享受到 OS 的紅利（包括 UI 的初始化和緩存）；
高性能：接近于原生體驗(yàn)；
內(nèi)存占用?。盒〕绦蚣夹g(shù)棧初始化后（包括 Inside SDK，Cube，AppX），大約只需要 7.5 MB；
支持 Android，iOS 雙端。
與 Web 引擎對(duì)比
下面僅僅針對(duì)小程序場(chǎng)景與 Web 引擎對(duì)比：
技術(shù)演進(jìn)
讓小程序業(yè)務(wù)低成本適配 Cube 渲染小程序，需要做三方面的工作：
擁抱 Web 技術(shù)，補(bǔ)齊前端開(kāi)發(fā)常用的能力：包括 CSS，小程序組件等；
完善相關(guān)工具：包括開(kāi)發(fā)，調(diào)試，Profile，發(fā)布，打包等；
針對(duì) Cube 的架構(gòu)特點(diǎn)，深入優(yōu)化，并拉開(kāi)和 Web 渲染的差異。提供更好的用戶體驗(yàn)。
新的流式布局（Flow Layout）
最初 Cube 小程序使用只支持 Flex 布局 Yoga 用于布局計(jì)算。后面升級(jí)成支持 Block，F(xiàn)lex，Inline-Block等多種布局方式的 Flow Layout。從而解決開(kāi)發(fā)者只能使用 Flex 布局的困擾。目前兩個(gè)布局引擎 Cube 內(nèi)部都支持。其中 Flow Layout 主要用在小程序，Yoga 用在卡片。兩者能力差異如下：
支持 CSS 樣式表
老版本的 Cube 只支持內(nèi)聯(lián)樣式和簡(jiǎn)單的 CSS 選擇器；然而小程序并沒(méi)有約束 CSS，因此 Cube 擴(kuò)充支持 CSS 樣式表，樣式繼承，多種選擇器等。從而使得 Web 渲染切換到 Cube 渲染，適配成本大大降低。甚至部分小程序可以做到在小程序 IDE 里基于 Web 渲染開(kāi)發(fā)，然后打包成 Cube 渲染產(chǎn)物在真機(jī)上預(yù)覽。前端同學(xué)無(wú)需進(jìn)行過(guò)多的修改和適配。
新老 Cube 版本，選擇器支持上的差異如下：
注：
[1] 老版本 Cube 是指：錢(qián)包 10.2.0 以前版本；
新樣式能力基本上對(duì)標(biāo) Web 引擎的樣式能力；
新樣式能力支持像這種復(fù)雜選擇器。
div > div.jartto p span.yellow a#t1 {} .pixel-ratio-2 .web1px::before {} div:nth-child(2n+1) {} input[type="button"] {} #blue,div > div.jartto p span.yellow a#t1 {}
支持自動(dòng)分詞，斷行（Inline Text）
最初 Cube 用的是 Android 和 iOS 提供的文本計(jì)算和繪制能力。這種技術(shù)方案（以下稱為平臺(tái)層 Text）存在3個(gè)問(wèn)題：
性能問(wèn)題：特別是 Android 下，利用 Android 平臺(tái)層的接口實(shí)現(xiàn)文本布局計(jì)算，導(dǎo)致在文本較多的情況下，布局耗時(shí)在渲染整體耗時(shí)里占比較高；
富文本特性：富文本以及許多文本特性支持較麻煩；
各平臺(tái)上實(shí)現(xiàn)文本效果存在細(xì)節(jié)差異或者兼容性問(wèn)題。
針對(duì)上述問(wèn)題，在 Flow Layout 基礎(chǔ)上增強(qiáng)支持 Inline Text 布局計(jì)算文本?；?Inline Text 可以較輕松實(shí)現(xiàn)以下富文本，圖文混排，分詞，自動(dòng)換行等。
1.富文本
2.自動(dòng)換行和分詞
Inline Text 實(shí)現(xiàn)前后的文本樣式對(duì)比如下：
注：
假設(shè)原有 Cube 采用平臺(tái)層接口實(shí)現(xiàn)的文本特性稱為：平臺(tái)層 Text；
綠色的 ?? 表示實(shí)現(xiàn)細(xì)節(jié)上不完善或者不完全支持；
在 Inline Text 基礎(chǔ)上可以實(shí)現(xiàn)功能豐富的富文本組件；
值得一提的是：該實(shí)現(xiàn)非常精巧，對(duì)于 Cube 包體積只增加了 170KB。具體細(xì)節(jié)后續(xù)文章詳細(xì)探討。
文本布局計(jì)算耗時(shí)對(duì)比（文本節(jié)點(diǎn)較多場(chǎng)景）：
采用 QuickJS 替代 V8
V8 雖然是性能最高的 JS 引擎，但是存在內(nèi)存占用大，初始化較慢等不足。在 IoT 或者低端設(shè)備上這些不足會(huì)被放大。因此在這些設(shè)備上，Cube 采用 QuickJS 取代 V8。一方面降低內(nèi)存占用，另外一方面提升初始化性能。
Cube 內(nèi)部目前適配了多個(gè) JS 引擎，具體如下：
在 Android 移動(dòng)端上使用 V8 和 JSI
iOS 上使用 JSC
IoT 等低端設(shè)備上使用 QuickJS
另外我們?cè)陂_(kāi)源 QuickJS 基礎(chǔ)上做了些優(yōu)化工作。優(yōu)化的結(jié)果大致如下（后續(xù)文章將詳細(xì)介紹）：
V8 Bench開(kāi)源 QuickJS優(yōu)化后 QuickJS效果DeltaBlue627731+16.5%Crypto893933+4.5%RayTrace4591194+160%EarleyBoyer9731906+95.9%RegExp178265+48.9%Splay7561783+135.8%NavierStokes164416430%分?jǐn)?shù)(越高越好)672991+47%
支持動(dòng)畫(huà)和多媒體組件
除了上述基礎(chǔ)組件和能力之外，動(dòng)畫(huà)和多媒體也是部分小程序不可缺少的。因此我們擴(kuò)展支持了?Video，Canvas、Lottie，Live Player?等組件支持。并應(yīng)用于 TV 大屏小程序、小游戲以及直播場(chǎng)景上。
在低端設(shè)備上，如何提高動(dòng)畫(huà)幀率并且降低內(nèi)存占用也做了深度的優(yōu)化。以下是 Video 和 Canvas 組件在小程序中的效果圖：
Cavas 組件Video 組件
支持多種模式的小程序產(chǎn)物
目前 Cube 支持多種模式的小程序產(chǎn)物：Native，Cube，Shared。
Native?模式：對(duì)應(yīng)的是舊的 Cube 渲染小程序模式，不支持 CSS 樣式表，只能支持內(nèi)聯(lián)樣式和有限的幾種 CSS 選擇器。性能最高，兼容性較低；
Cube?模式：在 Native 模式進(jìn)化而來(lái)，支持 CSS 樣式表和多種 CSS 選擇器。性能良好，支持常用的 CSS 樣式和特性（包括樣式繼承，多種 CSS 選擇器）；
Shared?模式：為了降低 Web 渲染的小程序遷移或者過(guò)渡到 Cube 渲染而開(kāi)發(fā)。在同一個(gè)小程序產(chǎn)物里既支持 Web 渲染一部分頁(yè)面又支持 Cube 渲染一部分頁(yè)面。而且 Cube 渲染的頁(yè)面支持樣式表。這樣在性能和兼容性平衡。小程序產(chǎn)物相對(duì)于 Web 渲染的小程序，產(chǎn)物體積增加不會(huì)超過(guò) 10%。
注：如果需要 Web 產(chǎn)物兜底，則?Native 模式?和?Cube 模式的小程序產(chǎn)物，比?Shared 模式大。
當(dāng)前工作
Cube 小程序在 TV 和 POS 機(jī)上和相關(guān)團(tuán)隊(duì)，一起打磨小程序技術(shù)棧（包括渲染引擎，JS 引擎，AppX，Ariver 容器）等。
在 TV 上面臨的問(wèn)題：
內(nèi)存少：有的設(shè)備只有 512MB 內(nèi)存，長(zhǎng)列表滾動(dòng)容易卡；
需要支持焦點(diǎn)切換；
CPU 主頻較低：有的只有 1GHz。
短中期目標(biāo)是用小程序技術(shù)棧替代 WeeX 單頁(yè)。當(dāng)前進(jìn)展如下：
小程序啟動(dòng)性能上超過(guò) WeeX 單頁(yè)（低端設(shè)備上優(yōu)勢(shì)更明顯）；
內(nèi)存占用上，小程序初始化后內(nèi)存占用小于 10MB，典型小程序整體內(nèi)存占用在 32MB 左右。
具體細(xì)節(jié)后續(xù)文章詳細(xì)總結(jié)。
在 POS 機(jī)上面臨的問(wèn)題：
在 POS 機(jī)上跑點(diǎn)餐小程序，主要有面臨以下問(wèn)題：
內(nèi)存少：部分設(shè)備只有 512MB 內(nèi)存，容易出現(xiàn)卡死和 OOM；
CPU 核心少：部分 CPU 只有雙核（硬件性能大約是主流手機(jī)的 1/5）；
長(zhǎng)列表滾動(dòng)卡。
短中期目標(biāo)是用小程序技術(shù)棧替代 Flutter 開(kāi)發(fā)的 App。當(dāng)前進(jìn)展如下：
小程序首屏啟動(dòng)性能提升了?30%+；
小程序重點(diǎn)的交互場(chǎng)景的頁(yè)面，比如：購(gòu)物車(chē)，商品詳情頁(yè)等，都已接近 Flutter App；
首頁(yè)滾動(dòng)幀率達(dá)到?50，用戶已經(jīng)難以感知和 Flutter 的差異（Flutter 幀率是 60）；
小程序內(nèi)存占用下降了 30%（本地測(cè)試已無(wú)卡死和 OOM）。
該場(chǎng)景主要是文本節(jié)點(diǎn)較多的長(zhǎng)列表。采用了非常多的優(yōu)化方法，后續(xù)文章詳細(xì)總結(jié)介紹。
總結(jié)
為了適配小程序，Cube 渲染引擎在布局計(jì)算、樣式能力、組件支持，還有開(kāi)發(fā)工具等在小伙伴一起努力下取得了較大的進(jìn)展。同時(shí)在低端設(shè)備（比如：IoT 設(shè)備）或者性能敏感場(chǎng)景，Cube 小程序性能優(yōu)化，降低內(nèi)存占用也取得了不錯(cuò)的效果。而未來(lái)面對(duì)多種多樣的 IoT 設(shè)備，還需要加速技術(shù)演進(jìn)以支持更多的場(chǎng)景。歡迎大家一起來(lái)交流討論。
