# Introduction of Small Program Startup Process
Before starting the optimization, let's first introduce the startup process of the Mini Program. Understanding the start-up process of a Mini Program can help developers to select the means of performance optimization more specifically and analyze the effect of performance optimization.
The startup process of this article takes Android and iOS Other platforms may differ slightly.
Note:The processes started by Mini Programs are not serial, they are parallel as much as possible. Calculating the total startup time cannot be simply added in stages.
The following image briefly describes the Mini Program startup process in some cases (note: the height of the rectangle is not proportional to the time spent in the corresponding phase).
# Figure 1: Sketch of Mini Program Startup Process (When the user accesses the Mini Program for the first time or when the Mini Program is updated synchronously, the environment is preloaded)
# Figure 2: Mini Program start flow diagram (user non-first visit, hit the environment preload)
# Figure 3: Mini Program start flow diagram (user not the first time access, did not hit the environment preload)
The Mini Program startup process mainly includes the following links:
# 1. Resource Preparation
# 1.1 Small Program Related Information Preparation
When the user accesses the Mini Program, the WeChat client needs to obtain the basic information such as the avatar, nickname, version, configuration and permissions of the Mini Program from the WeChat background to carry out the necessary version management, permission control and verification of the Mini Program.
In order to minimize the impact on startup time while ensuring real-time information, the information isLocal cacheIt is updated through some mechanism.
Obtaining and updating information requires a network request. Requests fall into two situations:
(1) Synchronization request: It will block the start flow of the Mini Program and affect the start time of the Mini Program. Synchronization requests are required in the following cases:
- First visit: When the user accesses the Mini Program for the first time (or the Mini Program is cleaned up), the client has no cache and needs to request information about the Mini Program synchronously.
- Synchronous update: WeChat will regularly check whether the frequently used mini programs are updated in the background. If a new version of the Mini Program is known at startup, the information is updated synchronously.
- Mandatory updates: When the user does not use the Mini Program for a long time, in order to ensure the real-time nature of the information, the information will be updated synchronously.
(2) Asynchronous request: parallel to the startup process without affecting the startup time. Mainly occurs in:
- Asynchronous update: For the Mini Program that has been used, if a new version of the Mini Program is not found on a regular basis, the local cache information is used first to complete the startup and update asynchronously.
# Impact on start-up time
When the user visits the Mini Program for the first time, updates the version of the Mini Program or uses the Mini Program that has not been used for a long time, the acquisition and update of the information will affect the start-up time of the Mini Program.network environmentYes.
From the perspective of the market, when the Mini Program version is released, it will lead to an increase in the proportion of requests that need to be synchronized at the start, which will lead to an increase in the average start-up time. Therefore, it is recommended that the developerReasonably Planned Release。
This part of the logic is completely controlled by the WeChat client, and the developer is currently unable to directly optimize it.
# 1.2 Operational environment preparation
The operating environment of the Mini Program includes the Mini Program process, the system components of the native part of the client and the UI Elements (such as Navigation bar, tabBar Etc.), the rendering of the page used by the WebView Containers, Developers JavaScript Code running environment, Mini Program base library, and so on.
Part of the environment (such as JavaScript Engine, Mini Program base library) needs to be ready before the Mini Program code is executed. The rest is done in parallel during startup. The relatively long preparation time of the running environment (especially on low-end devices) can have a serious impact on Mini Program startup.
# Environmental preload
In order to reduce the impact of running environment preparation on startup time as much as possible, the WeChat client will use a certain strategy in the mini program according to the user's use scenario and the use of equipment resources.Before StartTo the operating environment.Partially preloaded, to reduce startup time.
We want the Mini Program to start using a preloaded environment as much as possible, but due to the impact of access scenarios, device resource conditions and operating system scheduling, andThere is no guarantee that the preloaded environment can be hit every time the Mini Program starts。
# Impact on start-up time
It takes a long time to prepare the running environment. If the pre-loaded environment is not hit when starting, it will have a significant impact on the startup time of the Mini Program. Length of time andPlatform, Device Performance, Preload RatioYes.
- Due to differences in system functionality and implementation of the startup process, it usually takes much more time to prepare the Android runtime environment than iOS。
- Low-end machine system resources are relatively tight, the pre-loaded environment will be more easily cleaned up by the system, resulting in a low preload ratio.
- The higher the preload ratio, the lower the average startup time can generally be.
This part of the logic is completely controlled by the WeChat client, and the developer is currently unable to directly optimize it.
# 1.3 Code package preparation
When the Mini Program is launched, it is necessary to obtain the code package address from the WeChat background according to the page the user visits. CDN Download the Mini Program code package and verify the code package. Depending on where the Mini Program page is subcontracted and which plug-ins are used, multiple code packages or plug-in packages may need to be downloaded at one launch.
In addition to the startup process, code package downloads are available at page jumps, pre-downloads, using theSubcontract asynchronyAnd so on.
In order to minimize the impact on startup time while ensuring that users have access to the new version as much as possible, the Mini Program code package is locallycache, and through theUpdate mechanismFor updates.
Similar to the preparation of related information, code package downloads will also be synchronous and asynchronous:
(1) Synchronous download: It will block the start flow of the Mini Program and affect the start time of the Mini Program. There are the following situations that require simultaneous downloading:
- First download: When the user accesses the Mini Program for the first time (or the Mini Program is cleaned up), the client has no cache and needs to download the code package synchronously.
- Synchronous updateFor Mini Program Information OccurrenceSynchronous updateorMandatory updatesIf an Mini Program version update is detected, the code package is downloaded synchronously.
(2) Asynchronous download: parallel to the startup process without affecting the startup time. Mainly occurs in:
- Asynchronous updateFor Mini Program Information OccurrenceAsynchronous updateIf an Mini Program version update is detected, the code package is updated asynchronously.
In order to reduce the time taken to download the code package, we have adopted methods including but not limited to the following:
- Code packet compression: Adoption [Zstandard algorithm](https://facebook.github.io /zstd/)The Mini Program code package is compressed to minimize the amount of data transmitted during download.
- Incremental updating: When the code package is updated, there is no need to re-download the full code package, only the small volume generated according to the algorithm.Incremental packageFor updates.
- More efficient network protocols: Download Code Package Priority Use QUIC and HTTP/2。
- Connect in advance: before the download takes place, in advance and CDN Establish a connection and reduce the number of downloads DNS The time taken for requests and connection establishment.
- Code packet reuse: Calculated for each code package MD5 Signature. Even if a version update has occurred, if the code package's MD5 If no changes have been made, there is no need to download again.
# Impact on start-up time
Download time is an important bottleneck in the start-up time, when the user visits the Mini Program for the first time or updates the version of the Mini Program, the download of the code package will affect the start-up time. Length of time andNetwork environment, the size of the code packet after compression, and whether the hit incremental updateYes.
Considering the impact of package size on user experience, the platform limits the size of a single Mini Program code package to an upper limit of 2M。The increase in the upper limit of the code package enables richer functionality for developers, but also increases traffic and local space consumption for users. To ensure startup speed, developers should control as much as possible the size of the code package used at startup. Specific methods can be referred toCode package volume optimization。
# 2. Mini Program code injection (logic layer)
When the Mini Program starts, it needs to read the configuration and code of the Mini Program from the code package and inject it into the JavaScript In the engine. During the main package code injection, the Mini Program's App.onLaunch and App.onShow Life cycle. If the Mini Program uses plug-ins or extension libraries, the code for the corresponding plug-ins and extension libraries will be injected before the developer code is injected.
In order to reduce the time consuming of Mini Program code injection, we have adopted methods including but not limited to the following:
- Code Caching: On some platforms, the WeChat client will use V8 Engine Code Caching Technology to cache the results of code compilation, reducing theNon-first injectionThe compilation is time consuming.
Be careful: If the code is used in the use asm, will lead to V8 of Code Caching Failure.
# Impact on start-up time
Mini Program code injection time directly affect the Mini Program start time. Length of time andCode complexity, synchronous interface calls, and some complex calculationsYes. If not enabled[Injection on demand]((ability/lazyload#Injection on demand))♪ time will be spentThe total number of pages and custom components launched into the subcontract。
BecauseHome RenderingData that needs to be sent using the logical layer. If Mini Program code injection takes too long, it will delayHome RenderingStart time. Suggested Developer ReferenceCode Injection OptimizationSections to be optimized.
# 3. Mini Program code injection (view layer)
The developer's WXSS and WXML Will compile JavaScript Code is injected into the view layer, which contains the page structure and style information needed for page rendering.
We adopt andMini Program code injection (logic layer)Similar way to optimize the injection time.
Mini Program code injection in view layer and logic layer is done in parallel。
# Impact on start-up time
Mini Program code injection time directly affect the Mini Program start time. Length of time andCurrent page structure complexity and number of custom components used by the pageYes. If not enabled[Injection on demand]((ability/lazyload#Injection on demand))♪ time will be spentThe total number of pages and custom components launched into the subcontract。
BecauseHome RenderingNeed to use the view layer of page structure and style information, if the Mini Program code injection takes too long, it will affect the rendering data from the logical layer to the view layer time, affect theHome RenderingTime consuming.
Although the developer cannot directly modify the view layer generated by the JS Code, but you can do this by using theInjection on demandReduce this time by removing unused custom components.
# 4. Home (Initial) Rendering
After the logic layer Mini Program code injection is completed, the Mini Program framework will initialize the page component tree according to the page visited by the user, and generate theInitial dataSent to the view layer, and in turn trigger the home page's Page.onLoad, Page.onShow Life cycle.
Initial data include Page In the initialization parameter Data Property values, and some of the earlier issued setData Data (which setData The first page rendering is related to the initialization timing between the rendering layer and the logical layer, and there is currently no guarantee that it will be counted).
After completing the view layer code injection and receiving the initial data sent by the logic layer, combined with the page structure and style information obtained from the initial data and the view layer, the Mini Program framework renders the Mini Program's homepage, displays the appletic preview screen, and triggers the homepage Page.onReady Events.
If it's turned on,Initial rendering cache，Home RenderingIt can be done directly using the cache, without relying on the initial data of the logical layer, reducing the start-up time.
At the Mini Program level, Page.onReady Event trigger flag Mini Program startup process completed。
# Impact on start-up time
The home page rendering time is the last part of the startup process, which directly affects the startup time of the Mini Program. Length of time andPage structure complexity, number of custom components involved in renderingYes. Suggested Developer ReferenceFirst Screen Rendering OptimizationSections to be optimized.
If enabled[Injection on demand]((ability/lazyload#Injection on demand)), Some component code injection will be delayed until this phase, causing the phase time to increase, but the total time will generally decrease.
# 5. First screen content display
Home RenderingAfter completion, the Mini Program startup process is completed, Loading At this time, the user should be able to see the first screen content immediately.
But if the body content of the home page relies on a network request (such as wx.request), users may not immediately see a meaningful full interface, and may still see a white screen. Need to wait for the network request to return asynchronously, calling the setData Update the page in order to present the real page.
Often, developers will also choose to show firstSkeleton screenTo avoid white screens in order to optimize the user experience.
# Impact on start-up time
asynchronous setData The display of the first screen content triggered by the drawing does not necessarily count towards the start-up time statistics, but it will delay the time for the user to see the page content and affect the user experience. Suggested Developer ReferenceFirst Screen Rendering OptimizationSections to be optimized.
# Common problem
(1) whyDevelopment versionandExperience versionMini Program startup ratioOfficial versionSlow down?
Development versionandExperience versionThe startup flow of the Mini Program and the code package download link will beOfficial versionThere will also be tighter permissions control, so startup time will be slower thanOfficial versionMini Program.
forDevelopment versionMini Program, in order to facilitate development and debugging, the base library will enable many debugging related capabilities, such as vConsole、sourceMap And so on, the level of log output will be lower, so the startup time and page switching time will also be extended.
(2) Why Android and iOS How much difference does it take to start?
There are some differences in device performance, system functionality and start-up process implementation between the two platforms:
- iOS The average performance of the device is better than that of Android
- iOS Mini programs and WeChat share the process, and Android The Mini Program runs in a separate process, requiring additional process creation and some basic module initialization.
- iOS On the need to use the system provided WebView and JavaScript Core, the initial cost is almost negligible
- Android UI And the overhead of the creation of system components is much higher than iOS。