Comparative Analysis of Cross‑Platform Mobile Development Technologies: Flutter, React Native, Weex, and H5

Introduction – The article reviews common cross‑platform technologies (Flutter, React Native, Weex, H5) by analyzing their technical features, basic architecture, compilation principles, rendering flow, and typical performance problems, then discusses how to choose the appropriate stack for business development.

Background – With the proliferation of platforms (Android, iOS, Mac, Windows, Web, Fuchsia OS, HarmonyOS) and diverse business scenarios, developers face UI inconsistencies across devices and duplicated development effort, prompting the need for a unified codebase.

Technology Stack Characteristics – A comparative diagram (Fig. 1) highlights performance, programming language, rendering engine, package size, community support, and platform coverage for each framework, raising questions about why native/Flutter perform better, why React Native/Weex are slower, and why H5 pages load slowly.

Basic Architecture

Flutter – Consists of a Dart‑based Framework layer (widgets, core libraries) and an Engine layer written in C/C++ that embeds the Skia rendering engine, Dart runtime, and text rendering. The Engine provides a uniform rendering surface across Android, iOS, macOS, Windows, and Web, enabling AOT compilation to native binaries for high performance.

React Native – Uses JavaScript (or TypeScript) to write logic, which is bundled into a JS bundle. A JavaScript engine runs the bundle, creates a virtual DOM, and communicates with native UI via a bridge. Rendering is performed by the platform’s native UI components. Recent versions improve thread model, async rendering, and bridge efficiency.

Weex – Alibaba’s framework (2016) compiles source code into a JS bundle that can be deployed on a server. At runtime, a V8 engine creates a virtual DOM, which is bridged to native controls for rendering. It supports Android, iOS, and Web, and is built on Vue.

WebView (H5) – The WebView kernel consists of a bridge layer for JS‑Native communication, WebCore for resource loading, HTML/CSS/JS parsing, layout, and rendering, and underlying OS support. It relies on third‑party libraries (Skia, V8, JavaScriptCore) and platform‑specific adaptations.

Compilation Principles – Flutter supports Release (AOT‑compiled machine code), Profile (performance monitoring), and Debug (JIT with hot‑reload). Release mode yields the fastest execution, while Debug mode provides rich tooling. React Native and Weex compile JavaScript bundles that are interpreted or JIT‑compiled at runtime.

Rendering Flow Comparison – Native apps invoke platform renderers directly; Flutter uses Skia for direct rendering; React Native/Weex generate a virtual DOM that is bridged to native renderers; H5/WebView follows the classic load‑parse‑layout‑paint pipeline. (Fig. 6 illustrates the differences.)

Common Performance Issues & Optimization

Flutter – Monitor page exception rate, FPS, and load time using runZoned, FlutterError, window.onReportTimings, and WidgetsBinding callbacks; upload metrics to monitoring platforms (mPaaS, ZhuLong) and use DevTools/Flutter Inspector for profiling. Additional optimizations include layout loading, state‑management, engine pre‑loading, memory, and package size reduction.

React Native – Pre‑download JS bundles to reduce load latency; upgrade to the latest React Native version for improved thread model, async rendering, and a faster bridge.

H5 – Initialize WebView early; employ offline packages to preload HTML, JS, CSS, and assets, dramatically reducing connection and loading time.

Conclusion & Technology Selection – Choose a stack based on development efficiency and user experience, considering architecture maturity, team expertise, community support, multi‑device consistency, dynamic update capability, and end‑user environment. For large‑scale C‑end projects, prioritize cost reduction and performance; for non‑C‑end projects, balance cost with user experience.

Authors: JD International Technology R&D Department – Lu Xu, Zhang Gong, Yao Feng, Gao Xinpeng, Li Chengfeng, Chen Haijiao, Gao Ming, Fan Weilian, Dan Yuqin, Mu Xinjian.