Cube 技术解读 | Cube 小程序技术详解

作者：曾维宏(恒实)

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

小程序作为动态化或者跨端开发的一种技术栈，在业界成为事实标准。Cube 作为一种轻量级小程序技术栈，具有体积小、启动快、内存占用低等特点，也比较适合“即用即走”的小程序场景。以下将重点介绍 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 引擎对比：

		Web	Cube
DSL	AXML	✅	✅
	CSS	✅