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

原创

已于 2022-05-31 11:46:06 修改 · 582 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#小程序

于 2022-05-31 11:44:10 首次发布

本文详细解读了Cube小程序技术栈，包括其模块组成如Components、Layout、Style、Rendering、Animation等，以及线程模型。Cube采用并行布局和异步绘制，提高了性能和启动速度。对比Web渲染，Cube解耦了DOM操作和JS执行，降低了内存占用。此外，文章还介绍了Cube的技术演进，如支持CSS样式表、自动分词和断行、多模式小程序产物以及针对低端设备的优化。

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 相关的 DO

最低0.47元/天解锁文章