How Cube Mini‑Program Engine Boosts Performance with Lightweight Rendering and QuickJS

Cube Mini‑Program Rendering

Mini‑programs have become the de‑facto standard for dynamic and cross‑platform development. Cube is a lightweight mini‑program stack characterized by small size, fast startup, and low memory consumption, making it ideal for "use‑and‑go" scenarios.

Module Composition

The Cube rendering engine consists of the following modules:

Components : standard mini‑program components.

Layout : supports Inline, Block, Flex, Inline‑Block, Inline‑Flex, text tokenization and line breaking.

Style : parses, matches and inherits styles, supports pseudo‑classes and pseudo‑elements.

Rendering : manages the render tree and image resource scheduling.

Animation : implements JS and CSS animations.

JS Bridge : bridges to the JS engine.

JS Engine : currently supports V8, JSC and QuickJS (Android uses V8/QuickJS).

Compositor : compositing for animations and layers (in development).

Thread Model

Cube employs multiple threads for different tasks:

Bridge : executes JS and handles DOM‑like JS APIs.

Layout : performs layout calculations, style matching and maintains the Layout Tree.

Render : maintains the Render Tree, binds data and handles layering.

Paint : generates drawing commands.

UI : dispatches platform events and performs UI layout.

Summary : Parallel layout and asynchronous painting allow the three stages (JS execution, Layout, Render) to run concurrently, similar to a CPU 5‑stage pipeline.

Unlike web rendering, where DOM operations must share the same thread with JS, Cube decouples DOM manipulation from JS execution, preventing GC pauses from affecting UI rendering and improving startup speed.

Cube Mini‑Program Stack Features

Small size and fast startup: core .so is only 2.8 MB; the whole stack (including Inside SDK) is about 5.7 MB.

High performance close to native.

Low memory usage: after initialization the stack occupies roughly 7.5 MB.

Supports both Android and iOS.

Comparison with Web Engine

Cube differs from traditional web engines in several aspects, such as DSL support, layout capabilities, and component compatibility. For example, Cube fully supports Flex, Block, Inline‑Block, and many CSS properties that web engines lack in mini‑program mode.

Technical Evolution

Adapting a mini‑program to Cube requires three steps: embracing web technologies (CSS, components), improving tooling (development, debugging, profiling, packaging), and optimizing for Cube’s architecture to enhance user experience.

New Flow Layout

Initially Cube used Yoga, which only supported Flex layout. It later added Flow Layout to support Block, Inline‑Block, and other layout modes, solving the limitation of Flex‑only designs.

CSS Stylesheet Support

Older Cube versions only allowed inline styles and a few selectors. The new version adds full stylesheet support, style inheritance, and a wide range of selectors (id, class, element, attribute, pseudo‑classes, @keyframes, @font‑face, etc.), greatly reducing migration effort from web to Cube.

div > div.jartto p span.yellow a#t1 {}</code><code>.pixel-ratio-2 .web1px::before {}</code><code>div:nth-child(2n+1) {}</code><code>input[type="button"] {}</code><code>#blue, div > div.jartto p span.yellow a#t1 {}

Inline Text Support

Cube now includes Inline Text layout, enabling efficient text measurement, automatic line breaking, word wrapping, and rich‑text features without relying on platform‑specific text APIs, which previously caused performance bottlenecks on Android.

JS Engine Optimization

V8 offers top performance but consumes more memory and has slower initialization, which is problematic for IoT or low‑end devices. Cube therefore adopts QuickJS on such devices, reducing memory footprint and improving startup time. Current engine support includes:

Android: V8 and JSI.

iOS: JSC.

IoT/low‑end: QuickJS (with custom optimizations).

Benchmarks show that the optimized QuickJS can achieve up to +160% performance improvement on certain workloads compared to the original V8.

Animation and Multimedia Components

Cube extends support to Video, Canvas, Lottie, Live Player, and other multimedia components, optimizing them for low‑end devices to maintain high frame rates and low memory usage.

Multiple Mini‑Program Modes

Native : legacy Cube mode, no stylesheet support, highest performance, lower compatibility.

Cube : evolved mode with full stylesheet support, good performance and compatibility.

Shared : hybrid mode allowing both Web and Cube rendering within the same package, slightly larger size but highest compatibility.

Shared mode adds less than 10% to the bundle size compared to pure Web mini‑programs.

Current Work

Efforts focus on optimizing the stack for TV and POS devices, addressing challenges such as limited memory (512 MB), low CPU frequency (≈1 GHz), and focus navigation. Goals include surpassing legacy single‑page solutions in startup speed, keeping memory usage under 10 MB after initialization, and achieving frame rates around 50 fps on low‑end hardware.

Conclusion

Cube’s rendering engine has made significant progress in layout computation, styling capabilities, component support, and tooling. Performance optimizations and memory reductions make it suitable for IoT and performance‑sensitive scenarios, while future work will continue to broaden device coverage and feature support.