Cube 技术解读 | Cube 卡片技术栈详解

作者：京君

“ 此前，我们上线了《Cube 技术解读》系列首篇文章《Cube 技术解读 | 支付宝新一代动态化技术架构与选型综述》，本文为 Cube 系列第二篇文章，针对 Cube 卡片技术栈做了深入解读，欢迎大家关注。”

动态卡片的背景

从Windows时代开始，应用程序图标就成了用户（流量）的主入口，并且一直持续到移动端时代。图标即入口的方式，缺点是不直观，最少需要一次点击后才能接触到想要的信息。在此背景下，iOS系统和部分Android系统实现了把内容和服务前置的卡片，举个例子，如下图1所示，苹果左一屏的卡片承载天气&股市内容的展示。此外，鸿蒙系统也提出了类似的卡片场景，作为某种流量入口。实际上，在应用内部的卡片作为内容展示以及服务入口的场景则更为普遍，图2和图3分别是支付宝首页和招行银行的理财页面，其中每个小矩形都是一个卡片。对于运营来说，卡片样式和内容可以随时配置，不用等待应用版本升级，是某种刚需。

Cube卡片概要

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

• 跨平台一致性

• • 一套代码
  • 效果对齐

• 动态化

• • 界面结构&样式动态化
  • 业务逻辑动态化

• 高性能

• • 极致的性能
  • 极致的内存

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

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

另一个维度是极致的内存。在信息瀑布场景无限下拉，Cube卡片的内存增长接近Native卡片。我们对卡片的能力做了比较精细分级，通过在开发时配置&