Note 1: The processes of the startup of the applets are not completed in serial, but in parallel as far as possible.

Note 2: The process of starting applets is not complete every time they are started. Caches are utilized as much as possible.

1 Small program running environment

Runtime environment Logic layer Rendering layer
IOS / Mac JavaScriptCore WKWebView
Android V8 Self-developed XWeb engine based on Mobile Chrome kernel
PC Chrome kernel Chrome kernel
Small program development tools NWJS Chrome WebView

2 Startup Process

The startup stage of the applets refers to the period from the user clicks to access the applets to the completion of the first screen rendering of the applets (triggered by the Page. OnReady event of the home Page).

2.1 Resource Preparation

1 Preparing information about small programs

  • The profile picture, nickname, configuration, version, and permission of the small program, and the necessary version management, permission control, and verification of the small program.
  • Information acquisition and update mechanism:
    • Synchronous request: blocks the startup process of the applet and affects the startup time of the applet
      • First request: When a user accesses the applet for the first time, the information related to the request is synchronized.
      • Synchronous updates: wechat regularly checks the latest versions of the most commonly used mini programs. If a new version of the applet is known at startup, the information is updated synchronously.
      • Forced update: When the user does not use the applets for a long time, the information is forcibly updated to ensure real-time information.
    • Asynchronous request: Parallel with the startup process without affecting the startup time
      • Asynchronous update: If no new version of the used applets is found in the periodic check or the applets are not in the periodic check list, the local cache information is used and the applets are updated asynchronously.
  • Impact on startup time:
    • Information is obtained synchronously when the user accesses the applets for the first time or has not used the applets for a long time.

2. Prepare the running environment for small programs

  • This includes applets, system components and UI elements (such as navigation bar, tabbar, etc.) for the native part of the client, WebView containers for rendering pages, JS engines to run the developer’s JS code, applets base libraries, and so on.
  • Information acquisition and update mechanism:
    • preload
  • Impact on startup time:
    • Affected by device resources and operating system scheduling, the startup time is affected if the preload is not matched.

3. Code package preparation

  • Get the code package address from the server, download the code package, and verify the code package.
  • Information acquisition and update mechanism:
    • The cache.
    • Code package compression: ZSTD algorithm is used to compress the small program code package to minimize the amount of data transferred during the download process.
    • Incremental update: When the code package is updated, you do not need to re-download the complete code package, only need to download the small incremental package generated according to the algorithm to update.
    • More efficient network protocols: QUIC and HTTP/2 are preferred for downloading code packages.
  • Impact on startup time:
    • Size of the code package

2.2 Developer code injection

Note: Developer code injection for the render layer and logic layer is done in parallel.

2.2.1 Logical layer code

  • Read the applets configuration and code from the code package and inject it into the JS engine.
  • Information acquisition and update mechanism:
    • Code Caching: On some platforms, the wechat client uses the Code Caching technology of the V8 engine to cache Code compilation results, reducing the compilation time during secondary injection.
    • Lazy injection: Reduce the amount of code that needs to be injected at startup by injecting code on demand. It needs to be manually enabled by the developer.
  • Impact on startup time:
    • The amount of code, synchronous interface calls, and some complicated calculations
    • Interface request time

2.2.2 Rendering layer code

  • Page structure and style information required for page rendering.
  • Impact on startup time:
    • Page structure complexity
    • Number of custom components used

2.3 Render the landing page for the first time

  • After the developer’s code injection is completed, combining the data obtained from the logic layer and the Page structure and style information obtained from the rendering layer, the applet framework will render the home Page of the applet, display the first screen of the applet, and trigger the Page. OnReady event of the home Page.
  • The Page. OnReady event triggers to indicate that the applet startup process is complete.

Optimization of small program performance

Click here for details