# Weixin Mini Program Introduction to Startup Process

Before we start optimizing, let's look at the startup process of Weixin Mini Program.Understanding the startup process of a Mini Program can help developers select performance optimization strategies more targeted and analyze the effects of performance omissions.

The launch process in this article is based on Android and iOS, and other platforms may vary slightly.

Note: Weixin Mini Program The processes started are not serial and will be as parallel as possible.Calculating the total startup time cannot be easily added in stages.

The following picture briefly describes the Weixin Mini Program startup process in some cases (note: where the width of the rectangular block is not proportional to the duration of the corresponding phase).

# Weixin Mini Program Start the process with intent

Developers can use wx.getPerformance Interface in the entryType is navigation, the name is appLaunch indicator (PerformanceEntry), get the page switching time.

Weixin Mini Program The startup process includes the following steps:

# 1. Resource preparation

# 1.1 Operational Environment Preparation

The runtime of Weixin Mini Program includes the Mini Program processes, system components and UI elements of the client-native parts (e.g. navigation bar, tab bar, etc.), the WebView container used to render the page, the runtime of the developer's JavaScript code, the Mini Program base library, and so on.

Some of the environment (e.g., JavaScript engine, Weixin Mini Program base library) needs to be prepared before executing the Mini Program code; others are done in parallel during startup. The relatively long preparation time for running environments, especially on low-end devices, can have a serious impact on the startup of Mini programs.

# Environment preloaded

In order to minimize the impact of runtime environment preparation on startup time, WeChat The client will, according to the user's use scenario and the use of equipment resources,In accordance with certain policies,** partially preloads **of the operating environment before Weixin Mini Program **to reduce startup time.

We want Weixin Mini Program to start as much as possible using the preloaded environment, but due to the access scenario, The impact of device resource status and operating system scheduling, and cannot guarantee that every time an Mini Program starts it will hit the preloaded environment .

# Impact on startup time

The runtime environment takes a long time to prepare, and if the preloaded environment is not hit at startup, Weixin Mini Program's startup time will be significantly affected.The length of time is related to platform, device performance, and preload ratio .

• Due to differences in system functionality and startup process implementation, Android running environment preparation is usually much more time-consuming than iOS.
• Low-end systems have relatively tight resources, and the preloaded environment can be more easily cleaned up by the system, resulting in a low preloaded proportion.
• The higher the preloading ratio, the lower the average startup time.

This part of the logic is completely controlled by the WeChat guest, and developers are currently unable to directly optimize it.

# 1.2 Weixin Mini Program Related Information Preparation

When the user accesses Weixin Mini Program, the WeChat client needs to obtain basic information such as the avatar, nickname, version, configuration, permission, etc. of the Mini Program from the WeChat backend to perform the necessary version management, permission control, and verification of the apple.

In order to minimize the impact on startup time while keeping the information real-time, the information is cached locally in **and updated through certain mechanisms.

Obtaining and updating information requires initiating a network request. Requests are divided into two situations:

(1) Synchronous request : It blocks Weixin Mini Program's startup process and affects the startup time of the Mini Program.There are the following situations where a synchronization request is required:

• First access to : When the user first accesses the Weixin Mini Program-END]] (or the Mini Program is cleaned), the client does not have a cache and needs to synchronize the request for Mini Program-related information.
• Synchronous update : WeChat will periodically check in the background for updates to frequently used Weixin Mini Program. If a new version of the Mini Program is known at startup, the information is updated synchronously.
• Mandatory update : When the user has not used Weixin Mini Program for a long time, in order to ensure the real-time nature of the information, it is mandatory to update the information simultaneously.

(2) Asynchronous request : Parallel to the startup process, does not affect the startup time.It happens mainly in:

• Asynchronous update : When you have used Weixin Mini Program and check regularly to see no new versions of the Mini Program, you prioritize the local cache information to complete the startup and update asynchronously.

# Impact on startup time

When a user first accesses Weixin Mini Program, updates the Mini Program version, or uses a long-used Mini Program, the acquisition and update of information affects the Mini Program's startup time, which is mainly related to the network environment .

From a market perspective, when the Weixin Mini Program version is released, it will lead to an increase in the proportion of synchronous requests required at startup, resulting in an increase in the average startup time.Therefore, it is recommended that developers plan their release .

This part of the logic is completely controlled by the WeChat guest, and developers are currently unable to directly optimize it.

# 1.3 Code pack preparation

When Weixin Mini Program starts, you need to get the code pack address from the WeChat background, download the Mini Program code pack from the CDN, and verify the code pack based on the page the user is visiting. Depending on the subpackage in which the Mini Program page is located and the plug-in used, you may need to download more than one package of code or plug-in at a time.

In addition to the initiation process, package downloads are triggered during page jumps, pre-downloads, asynchrony](../../subpackages/async.md) with [sub-packages, etc.

In order to ensure that users have access to the new version as much as possible,To minimize the impact on startup time, the Weixin Mini Program code packages cache **locally and update via the update mechanism .

Similar to the preparation of relevant information, there are also two situations in which code packages are downloaded synchronously and asynchronously:

(1) Synchronous download : will block Weixin Mini Program startup process, affecting the startup time of the Mini Program.There are situations where synchronized downloading is required:

• First Download : When the user first accesses the Weixin Mini Program (or when the Mini Program is cleaned), the client has no cache and needs to download the code package synchronously.
• Synchronous Updates : For Weixin Mini Program information that is "synchronized" or "forced" to update, code packages are downloaded simultaneously if a minor version update is detected.

(2) Asynchronous download : Parallel to the startup process, does not affect the startup time.It happens mainly in:

• Asynchronous update : In case of "asynchronous update" of Weixin Mini Program information, if an Mini Program version update is detected, the code package is asynchronously updated.

In order to reduce the time spent downloading code packages, we have taken steps including but not limited to the following:

• Code Pack Compression : Zstandard algorithm [compresses the Weixin Mini Program code pack to minimize the amount of data transmitted during download.
• Incremental update : When a code packet is updated, there is no need to redownload the full code packet, only to download the small incremental **generated by the algorithm to update it.
• A more efficient network protocol : Preferentially uses QUIC and HTTP / 2.
• Pre-established connection : Establish a connection to the CDN before the download occurs, reducing the time spent on DNS requests and connection establishment during the download process.
• Package reuse : MD5 signatures are computed for each package.Even if there is a version update, if the MD5 of the code package has not changed, there is no need to download again.

# Impact on startup time

Download time is an important bottleneck in startup time, and the download of code packages will affect startup time when users first access Weixin Mini Program or when Mini Programs are updated.The length of time is related to the network environment, the size of the package after compression, and whether the incremental update is hit.

Considering the impact of package size on the user experience, the platform limits the size of a single Weixin Mini Program code package to 2M.The increase in code pack caps enables richer functionality for developers, but also increases traffic and local space usage for users. In order to guarantee startup speed, developers should control as much as possible the size of the code packages used at startup.Specific methods can refer to .

# 2. Weixin Mini Program Code injection (logic layer)

Weixin Mini Program The configuration and code of the Mini Program need to be read from the code package and injected into the JavaScript engine.During the master package code injection, theApageonLaunchandApagesShowlifecycles of the Mini Program are triggered.If a small Mini Program uses a plug-in or an extension library, the corresponding plug-in and extension library code is injected before the developer code is injectable.

In order to reduce the time of Weixin Mini Program code injection, we have adopted methods including but not limited to the following:

• Code Caching : On some platforms, WeChat Clients use V8 engine [Code Caching [[TAg-0-END]]Technology caches the result of code compilation to reduce the compilation time when is not the first time is injected.

Note : If you useuse asmin your code, this will cause V8 Code Caching to fail.

# Impact on startup time

Weixin Mini Program The injection time of code directly affects the startup time of Mini Program.The length of time is related to code complexity, synchronous interface calls, and some complex calculations.If you do not enable to inject on demand, the time spent is also related to launching the total number of pages and custom components used in the subpackage .

Since "Home Rendering" requires data sent by the logical layer, if the Weixin Mini Program code injection takes too long, it will delay the start of "Home Rendering."Developers are advised to refer to the Code Injection Optimization chapter for optimization.

# 3. Weixin Mini Program Code injection (view layer)

The developer's WXSS and WXML are compiled into JavaScript code and injected into the view layer, containing the page structure and style information needed for page rendering.

We optimize injection time in a similar way to "Weixin Mini Program code injection (logic layer)."

**Weixin Mini Program code injection at the view and logic layers is done in parallel.

# Impact on startup time

Weixin Mini Program The injection time of code directly affects the startup time of Mini Program.The length of time is related to the complexity of the current page structure and the number of custom components used by the page .If you do not enable to inject on demand, the time spent is also related to launching the total number of pages and custom components used in the subpackage .

Because Home Page Rendering uses page structure and style information from the view layer, if the Weixin Mini Program code injection takes too long, it affects the amount of time the rendering data reaches from the logic layer to the view layer and affects Home Page rendering time.

Although developers cannot directly modify the JS code generated by the view layer, they can reduce this time by using "on-demand injection" and removing unused custom components.

# 4. Home (for the first time) Render

After the logic layer Weixin Mini Program code injection is complete,The Mini Program framework initializes the page component tree based on the page visited by the user, generating first-screen rendering data sent to the view layer, and in turn triggers the [[homepage]]Page.onLoad,Page.onShowLife cycle.

The data associated with the first screen rendering includes the data attribute values in the Page initializer parameter, and some relatively early setData data (which setData can be counted for the first screen render is related to the initialization sequence between the rendering layer and the logic layer, and there is no guarantee that it will be counted).

After the view layer code injection is completed and the first screen rendering data sent by the logic layer is received,Combined with page structure and style information from the initial data and view layers, the Weixin Mini Program framework renders the Mini Program's homepage, displays the appletic homepage, and triggers thePage.onReadyevent for the Mini Program.

If you turn on the Initial Rendering Cache ]], the Home Rendering can be done directly using the cache, without relying on the logical layer's initial data, reducing startup time.

Weixin Mini Program At the framework level, aPage.onReadyevent is triggered to mark the completion of the Mini Program startup process .

# Impact on startup time

Home page rendering time is the last part of the startup process, which directly affects the startup time of Weixin Mini Program.The length of time is related to page structure complexity and the number of custom components involved in rendering .It is recommended that developers refer to the "First Screen Rendering Optimization" chapter for optimization.

If you enable to inject on demand, some component code injections are delayed to this stage, leading to an increase in phase time, but generally a decrease in total phase time.

# 5. First screen display of content

After the "home page rendering" is completed, the Weixin Mini Program start process is completed, the loading disappears, and the user should be able to see the first screen immediately.

But if the main content of the home page depends on a web request (e.g.wx.request)After an asynchronous source, the user does not necessarily see a meaningful full interface immediately, and may still see a white screen interface. You need to wait for the network request to return asynchronously and call setData to update the page to render the real page.

Often, developers also choose to display a "skeleton screen" first to avoid a white screen in order to optimize the user experience.

# Impact on startup time

The display of the first screen content drawn by asynchronous setData does not necessarily count in the startup time statistics, but it will delay the user's time to see the page content and affect the user experience.It is recommended that developers refer to the "First Screen Rendering Optimization" chapter for optimization.

# Common problem

(1) Why do the "Development" and "Experience" Weixin Mini Program start slower than the "Official"?

The development and experience versions of Weixin Mini Program will have different startup processes and package download links than the official version, and will also have stricter permissions controls, so the startup time is slower than the official Mini Program.

For the Development Edition Weixin Mini Program, in order to facilitate development debugging, the foundation will enable many debugging-related capabilities, such as vConsole, sourceMap, etc., and the log output will be lower, so startup time and page switching time will be longer.

(2) Why is the startup time of Android and iOS so different?

There are some differences in device performance, system functionality, and startup process implementation between the two platforms:

• The average performance of iOS devices is better than Android;
• IOS Weixin Mini Program and WeChat share processes, while Android Mini Programs run in separate processes, requiring additional process creation and initial process of some basic modules;
• On iOS, you need to use WebView and JavaScript Core provided by the system, and the initial cost is almost negligible;
• Android UI and system components are much more expensive to create than iOS.