How Skyline Engine Gives WeChat Mini Programs Near‑Native Mobile Performance

Integrating Youzan WeChat Mini Program with Skyline Engine

Mini Program and Mobile Experience

Early mobile development was dominated by H5 (Web‑based) and native technologies. Because of limited efficiency, many vendors used H5 with Hybrid solutions to access native capabilities. WeChat Mini Programs offered a standardized lightweight approach.

As mobile tech advanced, users demanded smoother experiences. Hybrid Web solutions felt sluggish compared to native apps, and the WebView‑based Mini Program could not match native performance. Skyline, a new rendering engine for Mini Programs, dramatically improves rendering speed and interaction smoothness, bringing the experience close to native.

For high‑frequency e‑commerce scenarios, we compare traditional Web page navigation with Mini Program navigation. Traditional Web shows a noticeable loading phase, while Mini Programs provide a much faster page switch.

Native apps like Xiaohongshu and Taobao achieve smoother transitions with three key details:

No white‑screen or flicker during page expansion.

Transition animation from card to full‑screen.

Instant, sub‑second loading.

After integrating Skyline on selected pages, Youzan Mini Program achieved similar native‑like routing, first‑frame no‑white‑screen, transition effects, and sub‑second rendering.

How to Achieve First‑Frame No‑White‑Screen

What Is the First Frame?

Youzan defines the first frame as the visual content the user sees immediately after a page switch.

Which Content Can Appear in the First Frame?

Any data set via setData before or during the component's attached lifecycle will be rendered in the first frame (WeChat documentation).

We compare synchronous data injection with asynchronous injection.

// Example data
const testContent = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit…';

data() {
    content: '';
}

// Synchronous injection
attached() {
    this.setData({
        content: testContent
    });
}

// Asynchronous injection
attached() {
    setTimeout(() => {
        this.setData({
            content: testContent
        });
    }, 200); // simulate async delay
}

Only synchronous injection appears in the first frame; asynchronous data shows after the page is rendered.

Experiment 1: Direct Data Injection in WebView

// Same example data as above
const testContent = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit…';

data() {
    content: '';
}

attached() {
    this.setData({
        content: testContent
    });
}

Conclusion: Direct synchronous injection in WebView achieves first‑frame no‑white‑screen.

However, real pages contain large data sets and complex logic.

Experiment 2: Simulated Heavy Computation Before Injection in WebView

attached() {
    function sleep(ms) {
        const start = Date.now();
        while (Date.now() - start < ms) {}
    }
    sleep(1000); // simulate blocking computation
    this.setData({
        content: testContent
    });
}

Conclusion: With blocking logic, WebView finishes routing before rendering, causing a brief white‑screen.

Experiment 3: Same Scenario Under Skyline

Using identical code, Skyline renders the page first and then runs the routing animation, eliminating the white‑screen.

Conclusion: Skyline guarantees stable first‑screen output even with heavy computation.

First‑Screen Data Preparation

Key strategies to speed up first‑screen rendering:

Pre‑load next page data on the previous page via a dedicated preload module.

Split next‑page data to include only what is visible in the initial viewport.

Offload part of the computation to the server so the page can output data directly.

Routing Animation Integration

Under Skyline, the built‑in open-container component enables native‑like routing animations with multiple modes and custom configurations.

<open-container class="card-item" bind:tap="goDetail">
    <small-card class="card-item" />
</open-container>

Integrating Skyline Engine

Skyline prioritizes performance, keeping only modern CSS features and adding many capabilities for near‑native experiences. Mini Programs can render with either WebView or Skyline, and mixed navigation is supported. Migrating to Skyline often requires style and structure adjustments.

Style Adaptation

In Skyline, text-overflow:ellipsis works only on text components; replace view ‑based implementations accordingly.

Structure Adaptation

Skyline does not support overflow: scroll on regular elements; use scroll-view instead, and separate overflow-x / overflow-y are unavailable.

Skyline Configuration

// app.json
"rendererOptions": {
    "skyline": {
        "defaultDisplayBlock": true,
        "defaultContentBox": true,
        "tagNameStyleIsolation": "legacy"
    }
},
"lazyCodeLoading": "requiredComponents",

// page index.json
"renderer": "skyline",
"componentFramework": "glass-easel"

Gradual Rollout (Gray Release)

To ensure stability, Youzan uses both internal and WeChat Skyline gray‑release mechanisms, controlling which merchants or users receive the Skyline version based on SDK version, OS, and WeChat version.

// app.json (gray release controls)
"rendererOptions": {
    "skyline": {
        "disableABTest": true,
        "sdkVersionBegin": "3.0.1",
        "sdkVersionEnd": "15.255.255",
        "iosVersionBegin": "x.y.z",
        "iosVersionEnd": "15.255.255",
        "androidVersionBegin": "x.y.z",
        "androidVersionEnd": "15.255.255",
        "ohosVersionBegin": "1.0.5",
        "ohosVersionEnd": "15.255.255"
    }
},

Conclusion: Exploring More Skyline Features in E‑Commerce

Currently, Youzan has applied Skyline mainly to routing transitions, achieving first‑frame no‑white‑screen and second‑level load speeds through data pre‑loading and first‑screen optimization. Future explorations include segmented half‑screen layouts, sticky search bars, immersive product browsing, and more.

References

[1] https://developers.weixin.qq.com/miniprogram/dev/framework/runtime/skyline/share-element.html

[2] https://developers.weixin.qq.com/miniprogram/dev/framework/runtime/skyline/open-container.html

[3] https://developers.weixin.qq.com/miniprogram/dev/framework/runtime/skyline/migration/release.html#%E5%8F%91%E5%B8%83%E4%B8%8A%E7%BA%BF

[4] https://developers.weixin.qq.com/miniprogram/dev/framework/runtime/skyline/experience.html