Cube 技术解读｜Cube 小程序技术详解 _生活百科

本文为《Cube 技术解读》系列第三篇文章，之前上线的《支付宝新一代动态化技术架构与选型综述》与《Cube卡片技术栈解读》欢迎大家回顾。

魔方卡片（Cube）已在「支付宝」App 中被广泛应用，同时，现已支持在 mPaaS 侧对外商业化输出，欢迎广大开发者登录 mPaaS 控制台体验及使用。而 Cube 小程序则是 Cube 技术除了魔方卡片（Cube）外的另外一种形态，将主要应用与智能电视、POS 机以及其他 IoT 领域，目前还在研发打磨中，欢迎广大开发者交流探讨。小程序作为动态化或者跨端开发的一种技术栈，在业界成为事实标准。Cube 作为一种轻量级小程序技术栈，具有体积小、启动快、内存占用低等特点，也比较适合“即用即走”的小程序场景。以下将重点介绍 Cube 小程序技术栈与技术演进实践（若无特殊说明，所有的数据和图表都是针对小程序）。

渲染小程序

模块组成

小程序视角，Cube 渲染引擎主要由以下模块组成：

Components：主要是小程序规范里的组件；Layout：支持 Inline，Block，Flex，Inline-Block，Inline-Flex 等多种布局方式，还包括文本分词，断行等计算；Style：支持样式解析，样式匹配，样式继承，伪类和伪元素等多种选择器；Rendering：管理渲染相关 Render Tree，图片资源请求调度等；Animation：JS 和 CSS 动画实现；JS Bridge：和 JS 引擎桥接；JS Engine：目前支持 V8，JSC，QuickJS；其中 Android 下支持 V8，QuickJS；Compositor：用于动画和图层的合成器（开发中）。

线程模型

Cube 小程序技术栈内部有这么几个线程：Bridge，Layout，Render，Paint，UI 等。

Bridge 线程：执行 JS；与 AppX 桥接的类 DOM 的 JSAPI；处理 JS 相关事件；Layout 线程：布局计算；样式计算与匹配；维护 Layout Tree；Render 线程：维护 Render Tree；绑定数据；分层；Paint 线程：生成绘制命令；UI 线程：平台事件分发；UI 布局。

小结：

并行布局，异步绘制：这里的并行是指 JS 执行，Layout 布局以及 Render 三者完全可以并行处理。由于 Layout 和 Render，Paint 等不在一个线程，因此是异步绘制；多个线程协同工作，有点像 CPU 的 5 级流水线。

值得注意得是：Web 渲染引擎有个特点就是和 Node 相关的 DOM 操作必须和 JS 在一个线程。这就导致解析 HTML，布局，样式计算，DOM，JS （包括垃圾回收）都在一个线程里。带来的后果就是只有解析完文档才能看到 UI 效果，这也是 Web 渲染小程序白屏时间较长的一个原因。

Cube 小程序技术栈，将“DOM操作” 和 JS 执行解耦。因此 JS 的 GC 不会影响 UI 呈现。这种实现对于加快小程序启动非常有帮助。由于布局计算和 JS 执行也解开耦合，因此一般不会由于 JS 执行阻塞 UI 交互。

Cube 小程序技术栈的特点

体积小，启动快：主 so 只有 2.8 MB（如果包括 Ariver，AppX，InsideSDK，整体小程序技术栈最小是 5.7MB）。另外可以享受到 OS 的红利（包括 UI 的初始化和缓存）；高性能：接近于原生体验；内存占用小：小程序技术栈初始化后（包括 Inside SDK，Cube，AppX），大约只需要 7.5 MB；支持 Android，iOS 双端。

与 Web 引擎对比

下面仅仅针对小程序场景与 Web 引擎对比：

技术演进

让小程序业务低成本适配 Cube 渲染小程序，需要做三方面的工作：拥抱 Web 技术，补齐前端开发常用的能力：包括 CSS，小程序组件等；完善相关工具：包括开发，调试，Profile，发布，打包等；针对 Cube 的架构特点，深入优化，并拉开和 Web 渲染的差异。提供更好的用户体验。

新的流式布局（Flow Layout）

最初 Cube 小程序使用只支持 Flex 布局 Yoga 用于布局计算。后面升级成支持 Block，Flex，Inline-Block等多种布局方式的 Flow Layout 。从而解决开发者只能使用 Flex 布局的困扰。目前两个布局引擎 Cube 内部都支持。其中 Flow Layout 主要用在小程序，Yoga 用在卡片。两者能力差异如下：

支持 CSS 样式表

老版本的 Cube 只支持内联样式和简单的 CSS 选择器；然而小程序并没有约束 CSS，因此 Cube 扩充支持 CSS 样式表，样式继承，多种选择器等。从而使得 Web 渲染切换到 Cube 渲染，适配成本大大降低。甚至部分小程序可以做到在小程序 IDE 里基于 Web 渲染开发，然后打包成 Cube 渲染产物在真机上预览。前端同学无需进行过多的修改和适配。