Mobile Development 18 min read

Performance Optimization of Alibaba's DX Native Dynamic Framework

Over the past two years Alibaba’s DX native dynamic framework has been re‑engineered by moving virtual‑node parsing, layout and drawing to background threads, adding an asynchronous drawing system, a unified rich‑text component, and off‑screen resource management, boosting low‑end device frame rates from ~30 FPS to over 55 FPS and cutting media‑CPU usage by 65 % while paving the way for richer interactive UI features.

DaTaobao Tech
DaTaobao Tech
DaTaobao Tech
Performance Optimization of Alibaba's DX Native Dynamic Framework

DX (DinamicX) is a native dynamic solution widely used within Alibaba, known for its high performance and stability. This article introduces the recent two‑year efforts to break performance bottlenecks and improve the DX rendering pipeline.

Introduction

DX separates logic and view, compiling XML to binary at build time, using native languages for implementation, and employing lightweight immutable virtual trees for layout. These design choices make DX performance close to pure native.

Current Status

To achieve extreme performance, DX pre‑processes XML into binary, parses static values during compilation, and performs most work off the main thread. However, three main bottlenecks remain:

Single‑threaded pipeline causes noticeable virtual‑node processing time in complex templates.

Platform drawing on the main thread limits performance for text‑heavy and image‑heavy scenarios.

Custom components from many business teams lack unified implementations, affecting stability and performance.

Pipeline Optimization

The optimization focuses on two areas: virtual‑node processing and view rendering.

Pipeline Asynchronization

By moving parsing, expression evaluation, measurement, and layout of virtual nodes to background threads, only the final flattening and rendering steps remain on the main thread. DX provides async hooks (onPrefetch) for components to preload data, reducing main‑thread load.

Asynchronous Drawing Framework

DX introduces an async drawing framework that offloads CALayer texture generation to background threads. The framework is extensible via protocols, allowing custom components to implement asynchronous drawing while keeping the main thread free for UI interactions.

General Rich‑Text Capability

DX now offers a unified rich‑text component built on TextKit (iOS) and Layout (Android), enabling efficient text layout, measurement, and drawing. This component runs asynchronously, improving frame rates in text‑heavy pages.

Off‑Screen Resource Control Framework

A new off‑screen resource manager controls video and GIF playback, automatically exposing cells based on visibility and duration, and throttles playback to reduce CPU usage. It supports both automatic and manual playback control.

Optimization Effects

Combined optimizations raise average frame rates on low‑end devices (e.g., iPhone 6) from ~30 FPS to >55 FPS for complex rich‑text scenes. Off‑screen resource control cuts media process CPU usage by 65 % in video‑heavy feeds.

Conclusion and Outlook

DX’s performance improvements have helped many business teams achieve smooth experiences, yet challenges remain: better support for interactive cards, modern declarative UI DSLs, and hybrid native/​custom‑draw rendering. Future work will continue to explore these directions.

mobileperformanceoptimizationRenderingAsynchronousDXpipeline
DaTaobao Tech
Written by

DaTaobao Tech

Official account of DaTaobao Technology

0 followers
Reader feedback

How this landed with the community

login Sign in to like

Rate this article

Was this worth your time?

Sign in to rate
Discussion

0 Comments

Thoughtful readers leave field notes, pushback, and hard-won operational detail here.