Ele.me mini program container first screen second opening optimization practice

Author: Qiu Ji (Ji Xue)

Ele.me APP is one of the super traffic portals with the largest user volume and the widest business scope in Ali's local life business scenarios, and its role and importance are self-evident. With the mini program technology as an increasingly mature and stable business solution being used and launched by more and more business parties, the mini program container for local life emerges in this context.

The applet container has served as the cornerstone of all applet business operations in the Ele.me app, and its performance and stability have become the focus of everyone’s attention. This article will analyze the applet container in the past year from the perspective of the first screen in seconds. Performance optimization practice in Ele.me APP.

Introduction

The local life applet container (Lriver) is built based on the basic capabilities of the applet container (Triver/Ariver) under the Alibaba technology system. As the local life applet container platform layer, Lariver flexibly customizes and supports many capabilities in local life scenarios, including routing, package management, navigation bar, business component/API extension, data storage, performance optimization, etc. The specific hierarchical structure is as follows:

Optimization practice

Let's first understand the whole process of the first screen display of the mini program. The first screen loading process of the mini program before optimization is basically loaded in series according to the following sequence diagram steps:

small program first screen loading sequence diagram (before optimization)

When determining optimizable nodes and optimization schemes, they basically follow the directions and ideas of using space for time, serially changing concurrency, preprocessing, and special scene-specific optimization. You can see that the colored nodes below (step3 ~ step13) are available Space can be optimized.

The optimized nodes have undergone targeted optimization in the past year and combined with the optimization capabilities of the basic container of the applet to form the final loading sequence diagram as follows:

small program first screen loading sequence diagram (after optimization)

1. Package and package information (pre-request, preset in APP, asynchronous update)

As shown in the above sequence diagram, advance the applet and Appx package through the Orange configuration to the idle pre-request after the APP is started, and put them in the buffer pool until the subsequent opening of the applet directly hits the package information and packet cache, which can save the network The request time-consuming phase directly enters the package loading phase. At the same time, some small program general resources or frameworks (Appx1.0) are preset in the APP, which can further improve the hit rate of package information/package cache.

In the process of loading all package information, an expired update strategy will be supplemented to improve the timing of triggering the asynchronous update of the applet, avoiding synchronous blocking waiting. The basic container will also cooperate with ZCache's cache management capabilities to support updates such as idle time, timing, and active push.

2. Render creation, resource loading (pre-pre-creation, pre-resource pre-loading in stages)

After the APP is started and the applet is closed, both the pre-creation of Render and the separate loading of Appx resources will be triggered, and they will be placed in the buffer pool to be reused when the applet is opened next time, and only the first one opened at that time The small program is valid (refer to the above timing diagram).

After Render is pre-created, Appx resources (jsbridge.js, Appx.mini.js, Appx.mini.css, es6-promise.mini.js, etc.) will be pre-loaded. This stage mainly saves the time-consuming process of Render creation and Render loading of local disk Appx resources.

3. Worker creation, resource loading (pre-pre-creation, pre-resource pre-loading in stages)

After the APP is started and the applet is closed, the pre-creation of Worker and the separate loading of Appx resources will be triggered, and they will be placed in the buffer pool until the applet is opened next time. The program is valid (refer to the above timing diagram).

After the Worker is pre-created, two JSContexts (A and B) will be created at the same time to load JSCBridge.js and Appx resources (af-Appx.worker.js) immediately and load specific package resources (index.worker) when the Mini Program is subsequently opened. .js). After B JSContext is loaded, the Appx environment context in A JSContext will be copied to B JSContext to complete the initial loading of the entire Worker environment of the applet. This stage mainly saves the time-consuming process of creating the worker and loading the local disk Appx resources by the worker.

4. First screen interface pre-request (pre-pre-request)

Requesting through the front first screen interface can effectively shorten the loading time of the first screen data and speed up the first screen second opening experience. The specific process is as follows:

5. First screen rendering (load first screen snapshot)

By saving the HTML snapshot of the page after the first screen is rendered successfully, the snapshot will be rendered and displayed first when starting in the future, which shortens the first visible time of the Mini Program page and improves the user experience. You can preset the HTML file of the first screen snapshot of the applet in the applet package in advance, so that the first screen of the applet can be seen for the first time.

6, Appx framework (Appx2.0)

At present, the local life applet container has been adapted to support the business side to launch the applet developed based on Appx 2.0. Compared with 1.0, the Appx 2.0 framework has a significant reduction in business rendering performance and memory usage; it supports the complete decoupling of render and worker from the architecture level. Make the follow-up speed start and Snapshot2.0 to be effectively realized. For the improvements brought about by Appx 2.0, Ele.me will continue to follow up and optimize in subsequent versions, expecting the overall performance to be better than the Appx 1.0 applet experience.

R&D phase and online data monitoring

The container monitors the first screen data performance of the applet through two aspects: core link performance buried point report and first screen launch performance detection tool. In the research and development stage, collect the time-consuming information of the container startup link to assist in discovering the overall performance of the mini program and the proportion of energy consumption in each phase, so that the performance bottleneck points can be found in time before the mini program is launched, which is helpful for targeted troubleshooting and optimization. At the same time, Ele.me also supports links to small programs generated by IDEs, and uses the Ali small program performance testing platform to report performance data to analyze performance bottlenecks and give optimization suggestions.

1. Ele.me APP-side performance auxiliary detection tool

2. Alibaba applet performance testing platform

3. Statistics on the average time

Take Ele.me homepage leisure and play, beauty/medical beauty two small programs as examples to compare the effect of online optimization before and after:

Applet name	The first screen visible time (2021.02.19~02.22) average	The first screen visible time (2021.08.19~08.22) average	Boost effect
Leisure and fun	1320ms	850ms	↓35.6%
Beauty/medical beauty	1218ms	823ms	↓32.4%

Problems to be optimized and prospects

question:

1. The performance of Appx 2.0 needs to be optimized;

2. Render preloading capability is still to be supported and improved;

3. The optimization of some nodes is not fully supported by tripartite applets for open end services.

The above optimization items (except for Render/Worker preloading) have supported the smooth operation of Ele.me’s APP applet business during the 618, 717, Double 11, and Double 12 promotion periods in the past year, and brought a significant first The screen second opening experience is improved. The upcoming Render/Worker pre-loading and the optimization capabilities of Appx 2.0 will bring a continuous and better second-opening experience to the local life applet container, and will gradually benefit the application to the three-party applet in the next open end business. go with.

, 3 mobile technology practices & dry goods for you to think about every week!