How Ant Group’s Cube Cards Deliver Native‑Level Performance for Mobile Apps

Cube Card Overview

Cube is Ant Group’s internally developed cross‑platform dynamic card solution, designed for in‑page region dynamicization. Each Cube card is embedded in a native page area and rendered via a card template, enabling content operators to improve development and operational efficiency.

Core System Architecture

The architecture consists of four main components, most of which are implemented in C++:

JSEngine : Executes card JavaScript logic and monitors data changes, using QuickJS with a custom lightweight reactive framework (JSFM).

CardEngine : Parses and binds card data, performs logical rendering, builds DOM instructions, manages JSAPI, handles JS bindings, and communicates with native events.

RenderEngine : Backend rendering core that calculates layout, parses styles, performs layer computation, self‑drawing, same‑layer rendering, and rasterization, as well as handling gestures and animations.

Platform : Provides platform‑specific interfaces such as atomic view wrappers, Canvas API, third‑party component protocols, and animation APIs.

Thread Model

Cube’s lifecycle involves two primary thread groups:

Business Thread : Initializes card data (beforeCreate stage).

Engine Thread : Shared across all runtime stages, comprising Bridge, Render, Paint, and UI main threads.

The Bridge thread runs the JavaScript runtime and handles DOM queries; it is lightweight and single‑threaded. The Render thread builds the render tree, computes node hierarchy and layer layout, also single‑threaded. The Paint thread performs node layering and rasterization; it may run on the UI thread or a thread‑pool depending on sync or async rendering. The UI main thread handles gestures, screen updates, and third‑party component data refresh.

Data Model

Three persistent trees and one temporary tree represent the card’s data:

NodeTree : Original DOM‑like node tree used for style parsing and layout.

RenderTree : A mutable tree that mirrors NodeTree but can be adjusted for the rendering phase.

LayerTree : A layered tree built on RenderTree, enabling independent concurrent rendering of different layers.

PaintTree : A temporary copy of a RenderTree subtree generated per render pass, optimized to skip fully covered nodes.

Performance Optimizations

Cube targets near‑native performance by limiting CSS capabilities, removing complex CSS features, and restricting JavaScript (QuickJS) with additional optimizations such as offline atom compilation and asynchronous GC. It also integrates WAMR to allow mixed JavaScript and AssemblyScript for hotspot functions.

Memory usage is minimized by fine‑grained capability grading and configurable compile‑time options, keeping growth comparable to native cards even in infinite‑scroll scenarios.

Native Rendering Enhancements

Layer Container : Introduces a Layer container (e.g., CALayer on iOS) that separates content and logic layers, improving shadow rendering, clipping, and canvas optimization.

Gesture Refactoring : Reworks gesture distribution to overcome platform limitations (e.g., sibling node event blocking), ensuring reliable event handling for third‑party components.

Rasterization Strategies : Supports both command‑based and bitmap rendering modes, switching based on scene requirements; explores texture view buffers and Skia Canvas to reduce CPU/GPU copies.

Same‑Layer Rendering : Treats third‑party components as independent layers, enabling efficient updates and reuse across cards while managing memory overhead for heavy components like maps or videos.

Current Adoption and Future Plans

Cube powers more than 20 business scenarios within Alipay—including homepage, securities, card pack, and travel—delivering over 100 billion daily page views. Future work includes expanding Cube to replace existing native and H5 cards across Alipay, improving developer tooling, reducing package size, and exploring IoT device UI stacks where Cube‑style cards can serve as lightweight application interfaces.