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 渲染小程序白屏工夫较长的一个起因。 ...