# Page switch optimization

The performance of page switching affects the coherence and fluency of user operations and is an important part of the performance of the Weixin Mini Program runtime.

# 1. The process of page switching

To optimize the performance of page switching, it is necessary to briefly understand the process of page switching. The page switching process is shown in the diagram:

Developers can use wx.getPerformance In the interface, the entryType is navigation, and the name is route (PerformanceEntry), which gets the page switching time.

When the destination page for the switch is loaded (e.g., routing type navigateBack, or switchTab to a loaded page), there is no need for View-Layer Page Initialization and Destination Page Rendering, and logical-Layer Page initialization is easier, as shown in the following diagram:

# 1.1 Trigger page switching

The process of page switching begins with the user triggering page switching.

The trigger time corresponds to the startTime in PerformanceEntry (route).

Page switching may be triggered by the following types of actions:

• Weixin Mini Program API Call: The developer invokes wx.navigateTo 、 wx.navigateBack 、 wx.redirectTo 、 wx.reLaunch 、 wx.switchTab Etc. API.
• The user clicks on the 'component' to switch pages.
• Users click on the native UI trigger: for example, click on tabBar (except for custom tabBar), click on the upper-left corner of the "return home" button, click on the system return key or slide left to return, etc.
• Weixin Mini Program Automatic reLaunch on hot boot: Class B scenario of Mini Program hot boot

At present, the latter two cases do not get an accurate trigger time, and the startTime of the PerformanceEntry (route) is consistent with the navigationStart.

# 1.2 Load sub-packages (if any)

If the target page of the page switch is in the subcontract, the subcontract needs to be downloaded during the page switch, and the JS code in the execution subcontract is injected into the logical layer.

Weixin Mini Program In the lifetime, each subcontract is injected only once in the logical layer.

# 1.3 View layer page initializer

Weixin Mini Program Each page in the view layer is rendered by a separate WebView, so a new WebView environment is required for page switching.The view layer page initialization mainly does the following:

• Creating a WebView
• Weixin Mini Program base library injected into the view layer
• Public code injected into the master package (except for independent subpackages)
• If the page is in a subpackage, inject the public code of the subpackage
• Inject page code

To reduce the time spent on view-layer page initialization, the necessary preloading is usually done after the page rendering is complete for use when the page switches. Preloading mainly does the following things:

• Creating a WebView
• Weixin Mini Program base library injected into the view layer
• Injection of public code for the master package (if the master package is already local)

If the page switches too quickly, or if the preloaded environment is recycled, you need to recreate the environment when the page switch.

If you have a preloaded environment when you switch pages, you can significantly reduce the time spent on page switching.

This stage is not required when the destination page for the switch has loaded completely.

# 1.4 Logic layer page initializer

When the subpackage is loaded and WebView is created, the Guest dispatches routing events to the base library.

When the repository receives an event, it performs logical page initializers, including triggering the previous page.onHide/onUnload、The page component tree initializes, updates the page stack and generates initial data to send to the view layer, and in turn triggers the target'sonLoad,onShowlife cycle.If " injection on demand" is enabled, this phase also injects page code.

The time the base library receives the event corresponds to the navigationStart in PerformanceEntry (route), which corresponds to the start time of PerformanceEntry (firstRender).

When the target page for the switch is loaded, there is no page component tree initialization and the initial data sent, and the target page is not triggered.onLoad。

# 1.5 Target page rendering

When the page switches to the target page does not exist, it triggers the page's first render.

After the view layer code injection is completed and the initial data sent by the logic layer is received,Combined with the page structure and style information from the initial data and view layers, the Weixin Mini Program framework renders the page and triggers theonReady andevents of the page.

The time when the viewlayer is rendered and the onReady event of the page is triggered, corresponding to the end time of PerformanceEntry (firstRender).

This stage is not required when the destination page for the switch has loaded completely.

# 1.6 Page Switch Animation

After the page is rendered, the client animates the page transition (e.g. pushing from right to left into the page). If the page is initialized and rendered longer than a fixed time, the page is pushed in early to avoid the user thinking the page is unresponsive.

The time the page push animation is completed, corresponding to the end time of PerformanceEntry (route).

# 2. How to optimize page switching

# 2.1 Avoid time-consuming operations on onHide / onUnload

When the page switches, the onHide or onUnload lifecycle of the previous page is invoked before the new page is created and rendered. If onHide and onUnload are executed too long, it may cause a delay in page switching.

• ✅The logic in onHide / onUnload should be as simple as possible, and if you have to do some complex logic, you can consider using setTimeout delay.
• ❌Reduce or avoid executing time-consuming logic in onHide / onUnload, such as synchronous interface calls, setData, etc.

# 2.2 First-screen rendering optimization

Page first-screen rendering is an important part of page switching time, and you can optimize it by referencing the first-screen-rendering optimization section of the startup performance optimization.

# 2.3 Initiate data requests in advance

In some performance-demanding scenarios, when using JSAPI for page hopping (e.g.wx.navigateTo),You can do some preparation for the next page in advance.Pages can communicate via EventChannel .

For example, when a page jumps, a data request for the next page can be initiated at the same time, rather than waiting for the page to be onLoad, allowing users to see the page content earlier. In particular, when jumping to the subcontract page, there may be a long time lag between jumping from the origination page to the onLoad page, which can be exploited.

# 2.4 Control when the next page is preloaded

The base library {% version ('2.15.0')%} is now supported, Android only.The lower version configuration does not take effect.

As described in Section 1.3, when the Weixin Mini Program page loads, the next page is preloaded. By default, the Mini Programs framework triggers preload 200 ms after the current page onReady triggers.

On Android, the WebView of all pages in the Weixin Mini Program render layer shares the same thread.In many cases, the initial data of the Mini Program includes only the rough framework of the page, not the complete content. The body part of the page needs to be updated by setData. Therefore, preloading the next page can block the rendering of the current page, causing delays in setData and user interaction, and affecting the timing of the user's view of the full content of the page.

To allow users to see the full page content earlier and to avoid the impact of the preloading process on the page loading process, developers can configure thehandleWebviewPreloadoption to control the timing of preloading the next page.

HandleWebviewPreloadhas the following values

• Static: The default value. Preload is triggered 200 ms after the current page onReady is triggered.
• Auto: Preload when the rendering thread is idle. By the base library according to a period of time requestAnimationFrame trigger frequency algorithm.
• Manual: Triggered by the developer by calling wx.preloadWebview .Developers can trigger it manually after the setData of the page's main content ends.

For example:

In apagejson (for global control)

{
  "window": {
    "handleWebviewPreload": "auto"
  }
}

Or in a page JSON file (only works on a single page)

{
  "handleWebviewPreload": "manual"
}

Page({
  onLoad() {
    this.setData({
      fullData: {}
    }, () => {
      // 只有配置为 manual 时需要调用
      wx.preloadWebview?.()
    })
  }
})

As shown in the figure below, assume that the full content of a Weixin Mini Program home page is divided into three setData: