How DX Achieves Near‑Native Performance: Pipeline Async, Async Rendering, and Resource Control

Introduction

DX (DinamicX) is a native dynamic solution widely used within Alibaba, offering near‑native performance and high stability. This article explains the performance breakthroughs and practical experiences of DX over the past two years.

Current Situation

DX separates logic and view, compiles XML to binary on the server, uses platform native languages, and employs a lightweight immutable virtual tree for measurement and layout, performing view operations only at the final render stage.

Performance Bottlenecks

Single‑threaded pipeline design causes noticeable cost in complex template scenarios.

Heavy text, image, and video rendering on the main thread limits frame rate, especially in content‑rich pages.

Custom high‑frequency components lack built‑in implementations, affecting performance, stability, and reusability.

Pipeline Optimization

DX introduces three major improvements: pipeline asynchronous execution, an async drawing framework, and an off‑screen resource control framework.

Pipeline Overview

XML components are first parsed into three trees—prototype, expanded, and flattened—before being handed to the platform view. Asynchronous execution moves binary parsing, expression evaluation, measurement, and layout to background threads, leaving only flattening and rendering on the main thread.

Async Rendering Framework

The async drawing framework shifts texture generation to background threads and commits the result on the main thread. It provides extensible hooks so custom components can perform non‑UI work in an onPrefetch callback, reducing main‑thread pressure.

Rich Text Capability

DX implements a common rich‑text component using TextKit on iOS and Layout on Android. By rendering rich text asynchronously, iPhone 6 complex text scenes achieve an average frame rate of 55 fps.

Off‑Screen Resource Control

A generic resource‑control framework monitors exposure, manages playback queues, and limits CPU usage for videos and GIFs. It reduces video‑related CPU consumption by over 65% in media‑heavy scenarios.

Optimization Results

Async pipeline reduces virtual‑node main‑thread time from up to 40% to under 10% in complex pages.

Async drawing raises rich‑text frame rate to 55 fps on low‑end devices.

Resource control cuts video‑related CPU usage to one‑third of its original value.

Overall, low‑end devices see frame rates increase from ~30 fps to >50 fps, improving user experience.

Conclusion and Outlook

DX’s performance improvements are driven by real‑world business needs. Future work includes better support for interactive cards, adopting modern declarative DSLs for UI description, and exploring hybrid self‑draw and native rendering to balance flexibility and performance.