How Baidu’s Smart Mini‑Program Framework Achieves Near‑Native Performance

Overview of Baidu Smart Mini‑Program Framework Evolution

The mobile web landscape has long been a trade‑off between native apps (NA) and H5 pages. Baidu’s smart mini‑programs combine the flexibility of H5 with native‑level performance by introducing a dedicated framework that has been continuously refined.

Framework Architecture

The framework, internally called SWAN , consists of four stacked layers:

swan‑js : the developer‑facing library that converts Swan code to HTML for WebView execution and exposes client capabilities.

swan‑native : implements the native APIs and UI components, manages the dual‑stack (render stack and JS execution stack) for security isolation, and provides an Extension mechanism for host‑specific extensions.

Porting Layer : an interface layer that enables open‑source integration with various hosts.

Host Base Layer : supplies fundamental host capabilities; hosts can adopt Baidu’s open‑source reference implementation if they lack these features.

Startup Process and Performance Metrics

The startup flow is divided into distinct phases:

Loading : initial UI with title and tab rendered.

First Paint (FP) : the first visual frame appears.

First Contentful Paint (FCP) : core UI elements such as the search box are rendered via the initdate API.

First Meaningful Paint (FMP) : dynamic content fetched from the network is displayed.

Time to Interactive (TTI) : all elements are loaded and the user can interact.

In 2019, Baidu measured an 80th‑percentile FMP of 1.9 s, later reduced to around 1.1 s through continuous optimization.

Optimization Techniques for Developers

Package Size Reduction

Keep the total package size under 1 MB; larger packages dominate startup time (up to 60 % of total latency).

Use split‑package and independent‑package strategies to separate low‑traffic pages from the main bundle.

Compress resources: move images to external servers, convert PNG to JPEG where appropriate, and remove unused assets.

Data Fetching Strategies

Reduce white‑screen time by fetching data early (e.g., in the onLaunch event) and avoiding blocking operations such as unnecessary permission requests. Prioritize critical requests, defer non‑essential ones, and implement pagination to load only one screen of data at a time.

Rendering Optimizations

The setData API is expensive; best practices include merging multiple updates into a single call, minimizing the data payload, and updating only changed variables rather than whole objects. Benchmarks show that updating 1 KB of data costs roughly 20 ms, with additional overhead when the JS runs in a WebView.

Self‑Check Workflow

Performance self‑assessment is divided into three stages:

Development : use tool‑based experience scores, client‑side performance panels, and telemetry.

Testing : record screen captures and employ high‑speed cameras to evaluate real‑world user experience.

Post‑Release : monitor metrics on the developer platform and consult official documentation or community channels for support.

By focusing on package size, efficient data fetching, and careful rendering, developers can bring mini‑programs close to native app performance.