# Initial rendering cache

Start from base library version 2.11.1. Please remaining backward compatible.

# How the Initial Render Cache Works

The initialization of the Mini Program page is divided into two parts.

• Logic level initialization: load the necessary Mini Program code, initialize the page this Object (also includes all the custom components that it relates to this Object), sending related data to the view layer.
• View layer initialization: load the necessary Mini Program code, and then wait for the logical layer to initialize and receive the data sent by the logical layer, and finally render the page.

When the page is launched, especially when the Mini Program is cold started and the first page is entered, the logic layer initialization time is longer. During page initialization, the user will see the standard loading screen of the Mini Program (during a cold start) or may see a slight white screen (during a page jump).

Enable the initial render cache so that the viewport layer does not need to wait for the logical layer to initialize, but can directly initialize the page in advance. Data The rendering results are displayed to the user, which can make the page visible to the user much earlier. It works as follows:

• After the first time the Mini Program page is opened, record the initial data rendering of the page and write it to a persistent cache area (the cache can be retained for a long time, but may be cleared for Mini Program updates, base library updates, storage recovery, etc.)
• When the page is opened a second time, the cache is checked to see if there is still a rendering of the initial data on the page, and if there is, the rendering is directly displayed.
• If the cached rendering results are shown, the page will not respond to user events until the logic layer is initialized.

With the initial rendering cache, you can:

• Quickly show the parts of the page that never change, such as the navigation bar
• Pre-display a skeleton page to enhance the user experience
• Display custom loading hints
• Display advertising in advance, etc.

# Supported Components

During the initial render cache phase, complex components cannot be displayed or respond to interactions.

Built-in components currently supported:

• <view />
• <text />
• <button />
• <image />
• <scroll-view />
• <rich-text />

Custom components themselves can be exposed (but the built-in components used in them also comply with the above restrictions).

# Static Initial Render Cache

To enable the initial rendering cache, the easiest way to do this is in the json Add a configuration item to the file "initialRenderingCache": "static" ：

{
  "initialRenderingCache":  "static"
}

If you want to enable all pages, you can use the app.json of window Add this configuration to the configuration section:

{
  "window": {
    "initialRenderingCache":  "static"
  }
}

After adding this configuration item, preview the Mini Program home page in the phone, then kill the Mini Program and enter again, and the home page will be rendered through the initial render cache.

Note: In this case, the initial rendering cache records the page Data Applied on the page WXML Results on, do not contain any setData Of the results.

For example, if you want to display the words "loading" on the page, these words are subject to Loading Data Field Control:

<view wx:if="{{loading}}">Loading...</view>

In this case, Loading Should be in Data Specified in the true , such as:

// The right thing to do
Page({
  data: {
    loading: true
  }
})

And cannot pass through setData will Loading Set as true ：

// Wrong thing to do! Don't do this!
Page({
  data: {},
  onLoad: function() {
    this.setData({
      loading: true
    })
  }
})

In other words, this practice contains only pages Data Of the rendering result, i.e., the pure static component of the page.

# Adding dynamic content to the initial rendering cache

In some cases, it's just a page. Data The rendering results will be more limited. Sometimes you want to show additional variable content, such as displayed advertising images URL Etc.

In this case, you can use the "dynamic" initial rendering cache. First, configure "initialRenderingCache": "dynamic" ：

{
  "initialRenderingCache":  "dynamic"
}

At this point, the initial render cache is not automatically enabled, and you also need to call the this.setInitialRenderingCache(dynamicData) To activate. Among them, dynamicData Is a set of data, with the Data Get Involved Together Page WXML Rendering.

Page({
  data: {
    loading: true
  },
  onReady: function() {
    this.setInitialRenderingCache({
      loadingHint: 'Loading '. // This portion of the data will be applied to the interface, equivalent to the initial Data Based on an additional one. setData
    })
  }
})

<view wx:if="{{loading}}">{{loadingHint}}</view>

In principle, with a dynamically generated initial render cache, the page is re-rendered once in the background using dynamic data, which is relatively expensive. Try to avoid frequent calls. this.setInitialRenderingCache , if called multiple times within a page, only the last call takes effect.

Note:

• this.setInitialRenderingCache The call cannot be made earlier than Page of onReady or Component of ready Lifecycle, which may otherwise have a negative impact on performance.
• If you want to disable the initial rendering cache, call the this.setInitialRenderingCache(null) 。