Cube 技术解读 | 详解「支付宝」全新的卡片技术栈

CodeHub#7 正式落幕，来自蚂蚁集团的技术专家「京君」与掘金社区的开发者们分享了「支付宝」全新的卡片技术栈——魔方卡片（Cube）。

京君围绕 Cube 技术的架构逻辑，阐述其渲染和生产过程，并指导开发者完成初阶的技术调试。

▶点击播放，可观看 CodeHub#7 完整回放；公众号mPaaS后台回复“Cube”可获取讲师完整PPT。

动态卡片的背景

从 Windows 时代开始，应用程序图标就成了用户（流量）的主入口，并且一直持续到移动端时代。图标即入口的方式，缺点是不直观，最少需要一次点击后才能接触到想要的信息。在此背景下，iOS系统和部分Android系统实现了把内容和服务前置的卡片，如下图所示：

此外，鸿蒙系统也提出了类似的卡片场景，作为某种流量入口。实际上，在应用内部的卡片作为内容展示以及服务入口的场景则更为普遍，比如支付宝首页和招行银行的理财页面，其中每个小矩形都是一个卡片。对于运营来说，卡片样式和内容可以随时配置，不用等待应用版本升级，也是某种刚需。

魔方卡片（Cube）概要

**魔方卡片（Cube）**是蚂蚁集团内部自研的一套跨平台动态化卡片解决方案，是服务于应用页面内的区域动态化技术，面向内容运营，帮助产品技术提高开发效率和运营效率。每一个魔方卡片（Cube）独立嵌在原生页面内的一个区域，区域内容通过卡片模版进行展示。

这里展开讲下高性能。魔方卡片（Cube）追求的是接近native原生体验。我们定义了两个维度:

一个是极致的性能。在Cube小程序能力的基础上，我们去掉了一些复杂的css能力，例如伪类伪元素、inline/block等，同时也对js的能力做了限制（魔方卡片使用quickjs作为脚本引擎）。此外，我们还对quickjs做了一些优化，包括不限于离线atom编译优化，异步gc优化等。我们也引入了wamr作为quickjs的“协处理器”，支持用户使用javascript和assemblyscript混合开发。这样用户可以用assemblyscript一些热点函数或者模块。

另一个维度是极致的内存。在信息瀑布场景无限下拉，魔方卡片的内存增长接近Native卡片。我们对卡片的能力做了比较精细分级，通过在开发时配置，减小运行时的内存消耗。下图展示了一个简单卡片，如图所示魔方卡片的工程目录，以及钱包某个卡片的真实代码和运行效果。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qKLFOQs9-1636447306847)(https: