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 等不在一个线程，因此是异步绘