# Initial rendering cache

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

# How the initial rendering cache works

Weixin Mini Program The initial page is divided into two parts.

Logical Layer Initialization: Load the required Weixin Mini Program code, initialize the page this object (including this object for all the custom components it involves), and send the relevant data to the view layer.
The view layer initializes: loads the necessary Weixin Mini Program code, then waits for the logical layer to initialize and receive data from the logical layer, and finally renders the page.

When starting a page, especially when Weixin Mini Program starts cold and enters the first page, the logical layer takes a long time to start. During page initialization, the user will see the standard loading screen of the Mini Program (when cold startup) or may see a slight white screen (during page transition).

Enabling the initial rendering cache allows the view layer to display the results of the page's initial data to the user without waiting for the logical layer to initialize, which can make the page visible to the user much earlier. It works as follows:

After the Weixin Mini Program page is first opened, the initial data rendering of the page is recorded and written to a persistent cache area (cache can be retained for a long time, but may be erased due to Mini Program updates, base library updates, storage recovery, etc.);
When the page is opened a second time, check whether the rendering of the page's previous initial data is still in the cache, and if so, display the rendering directly;
If the rendering results in the cache are shown, the page cannot respond to user events for the time being until the logic layer is initialized.

Using the initial rendering cache, you can:

Quickly display parts of a page that will never change, such as the navigation bar;
Display a skeleton page in advance to enhance the user experience;
Show custom loading prompts;
Display ads in advance, etc.

# Supported components

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

Built-in components currently supported:

``
``
<button>
<img></img>
``
``

The custom components themselves can be displayed (but the built-in components used in them also follow the above limitations).

# Static initial rendering cache

To enable initial render caching, the easiest way is to add a configuration item [jsonto the page's"initialRenderingCache": "static"：

{
  "initialRenderingCache": "static"
}

If you want to enable this for all pages, you can add this configuration to theapagejsonwindow`configuration segment:

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

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

Note: In this case, the initial render cache records the results of the page data applied to the page WXML, and does not contain any setData results.

For example, if you want to display the word "loading" in your page, these words are controlled by theloadingdata field:

<view wx:if="{{loading}}">正在加载</view>

In this case,loadingshall be specified indataastrue, such as:

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

setData``loadingtotrue：

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

In other words, this approach contains only the rendering results of the page'sdata, i.e. the purely static components of the page.

# Custom rendering cache timing

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

A static initial rendering cache is generated only after the page is rendered for the first time. Page content added duringonLoador later in the lifecycle cannot enter the cache.If you want to generate a cache at a custom time, you can configure"initialRenderingCache": "capture":

{
  "initialRenderingCache": "capture"
}

At this point, the initial render cache is not automatically enabled, and you need to callthis.setInitialRenderingCache ()in the page to enable it.

Page({
  data: {
    loading: true
  },
  onLoad: function() {
    this.setData({
      loading: false
    })
    this.setInitialRenderingCache() // 渲染缓存会在此时生成
  }
})

# Add dynamic content to the initial rendering cache

In some scenarios, the rendering of just the pagedatawill be limited.Sometimes you want to show some additional variable content.

In this case, you can use the "dynamic" way of initially rendering the cache.First, configure"initialRenderingCache": "dynamic":

{
  "initialRenderingCache": "dynamic"
}

At this point, the initial render cache is not automatically enabled, and you need to callthis.setInitialRenderingCache (dynamicData)in the page to enable it.WheredynamicDatais a set of data that, together withdata, participates in page WXML rendering.

Page({
  data: {
    loading: true
  },
  onReady: function() {
    this.setInitialRenderingCache({
      loadingHint: '正在加载' // 这一部分数据不会真的参与页面渲染，仅仅用于生成缓存。也并*不等价*于一次 setData 调用
    })
  }
})

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

In principle, when the initial rendering cache is dynamically generated, the page is re-rendered once in the background using dynamic data, which is relatively overhead.Therefore, avoid frequent calls tothis.setInitialRenderingCache. If multiple calls are made within a page, only the last call takes effect.

NOTE:

This.setInitialRenderingCacheCall cannot be made earlier thanPageTheonReadyor theComponentlifecycle ofreadymay otherwise have a negative impact on performance.
If you want to disable the initial render cache, callthis.setInitialRenderingCache (null).