本文是《魔方技术解读》系列的第三篇。欢迎您回顾以前的。
Cube卡已广泛应用于“支付宝”App。同时，现已支持对外商业输出。欢迎开发者登录控制台体验使用。
魔方小程序是魔方卡（Cube）之外的另一种魔方技术。主要应用于智能电视、POS机等物联网领域。它仍在开发和完善中。欢迎开发者交流讨论。
作为动态或跨端开发的技术栈，小程序已成为业界事实上的标准。Cube作为轻量级小程序技术栈，具有体积小、启动快、内存占用低等特点。它也更适合“即用即用”的小程序场景。
以下将重点介绍Cube小程序技术栈和技术演进实践（所有数据和图表均针对小程序，除非另有说明）。
渲染小程序模块组成
从小程序来看，Cube渲染引擎主要由以下模块组成：
线程模型
Cube小程序技术栈里面有几个线程：、、、、UI等。
概括：
**值得注意的是：** Web渲染引擎的一个特点是与Node相关的DOM操作必须和JS在同一个线程中。这导致在一个线程中解析 HTML、布局、样式计算、DOM、JS（包括垃圾收集）。后果就是解析文档后才能看到UI效果，这也是Web渲染小程序白屏耗时较长的原因之一。
Cube 小程序技术栈将“DOM 操作”和 JS 执行解耦。所以 JS 的 GC 不会影响 UI 渲染。这个实现对于加速小程序启动非常有帮助。由于布局计算和 JS 执行也是解耦的，所以 UI 交互一般不会被 JS 执行阻塞。
Cube小程序技术栈特点及Web引擎对比
以下只是小程序场景与web引擎的对比：
技术演进新流程布局（流程）
最初，Cube 小程序使用 Yoga 进行仅支持 Flex 布局的布局计算。后来升级为Flow，支持Flex、-等多种布局方式。从而解决开发者只能使用Flex布局的问题。目前，内部支持两种布局引擎 Cube。其中Flow主要用在小程序上，Yoga用在卡片上。两种能力的区别如下：
支持 CSS 样式表
旧版 Cube 仅支持内联样式和简单的 CSS 选择器；但是小程序并没有对 CSS 进行约束，所以 Cube 扩展支持 CSS 样式表、样式继承、多选择器等，从而将 Web 渲染切换为 Cube 渲染，适配成本大大降低。甚至可以在小程序IDE中基于Web渲染开发一些小程序，然后打包成Cube渲染产品在真机上预览。前端同学不需要做太多的修改和改编。
新旧 Cube 版本在选择器支持上的差异如下：
笔记：
div > div.jartto p span.yellow a#t1 {}
.pixel-ratio-2 .web1px::before {}
div:nth-child(2n+1) {}
input[type="button"] {}
#blue,div > div.jartto p span.yellow a#t1 {}
支持自动分词、换行（文本）
最初，Cube 使用了 iOS 提供的文本计算和绘图能力。该技术方案（以下简称平台层文）存在3个问题：
性能问题：特别是使用平台层的接口来实现文本布局计算，导致文本很多时布局时间占整体渲染时间的比例很大；
富文本特性：富文本和很多文本特性支持起来比较麻烦；
在各种平台上实现文字效果时，细节或兼容性问题存在差异。
针对以上问题，基于Flow，对文本布局计算文本进行了增强，支持Text布局。基于Text，可以轻松实现以下富文本、图文混合、分词、自动换行等。
1. 富文本
2. 自动换行和分词
Text实现前后的文字样式对比如下：
笔记：
文本布局计算耗时比较（文本节点较多的场景）：
采用替代 V8
V8虽然是性能最高的JS引擎，但也存在内存占用大、初始化慢等缺点。这些缺陷在物联网或低端设备上被放大了。所以在这些设备上，使用的是 Cube 而不是 V8。一方面减少了内存使用，另一方面提高了初始化性能。
Cube目前适配多种JS引擎，如下：
另外，我们在开源的基础上做了一些优化工作。优化的结果大致如下（后续文章会详细介绍）：
支持动画和多媒体组件
除了上述基本的组件和能力开发工具显示小程序样式不对，动画和多媒体对于一些小程序来说也是必不可少的。因此，我们扩展了对 , , , Live 等组件的支持。并应用于电视大屏小程序、小游戏、直播场景。
在低端设备上，如何提高动画帧率和降低内存占用也进行了深度优化。下面是小程序中He组件的渲染图：
支持多种模式的小程序产品
目前Cube支持多种模式的小程序产品：、Cube、.
注意：如果需要Web产品的底线，模式和Cube模式的小程序产品比模式大。
研发进度
Cube小程序与TV、POS机相关团队共同打磨小程序技术栈（包括渲染引擎、JS引擎、AppX、容器）等。
电视面临的问题：
中短期目标是用小程序技术栈替代 WeeX 单页。目前进展如下：
具体细节在后续文章中总结。
POS机面临的问题：
在POS机上运行点餐小程序主要面临以下问题：
中短期目标是用小程序技术栈替代已开发的App。目前进展如下：
场景主要是一个包含许多文本节点的长列表。采用了很多优化方法，在后续文章中进行了总结和详细介绍。
总结
Cube渲染引擎为了适配小程序，在小伙伴的努力下，在布局计算、样式能力、组件支持、开发工具等方面都取得了长足的进步。同时，在低端设备（如物联网设备）或性能敏感的场景下，对Cube小程序的性能进行了优化，以减少内存使用，取得良好的效果。
未来，面对多种多样的物联网设备，需要加速技术演进，支持更多场景。欢迎大家一起交流讨论。
