初始渲染緩存

基礎(chǔ)庫(kù) 2.11.1 開(kāi)始支持，低版本需做 兼容處理。

初始渲染緩存工作原理

小程序頁(yè)面的初始化分為兩個(gè)部分。

• 邏輯層初始化：載入必需的小程序代碼、初始化頁(yè)面 this 對(duì)象（也包括它涉及到的所有自定義組件的 this 對(duì)象）、將相關(guān)數(shù)據(jù)發(fā)送給視圖層。
• 視圖層初始化：載入必需的小程序代碼，然后等待邏輯層初始化完畢并接收邏輯層發(fā)送的數(shù)據(jù)，最后渲染頁(yè)面。

在啟動(dòng)頁(yè)面時(shí)，尤其是小程序冷啟動(dòng)、進(jìn)入第一個(gè)頁(yè)面時(shí)，邏輯層初始化的時(shí)間較長(zhǎng)。在頁(yè)面初始化過(guò)程中，用戶將看到小程序的標(biāo)準(zhǔn)載入畫面（冷啟動(dòng)時(shí)）或可能看到輕微的白屏現(xiàn)象（頁(yè)面跳轉(zhuǎn)過(guò)程中）。

啟用初始渲染緩存，可以使視圖層不需要等待邏輯層初始化完畢，而直接提前將頁(yè)面初始 data 的渲染結(jié)果展示給用戶，這可以使得頁(yè)面對(duì)用戶可見(jiàn)的時(shí)間大大提前。它的工作原理如下：

• 在小程序頁(yè)面第一次被打開(kāi)后，將頁(yè)面初始數(shù)據(jù)渲染結(jié)果記錄下來(lái)，寫入一個(gè)持久化的緩存區(qū)域（緩存可長(zhǎng)時(shí)間保留，但可能因?yàn)樾〕绦蚋隆⒒A(chǔ)庫(kù)更新、儲(chǔ)存空間回收等原因被清除）；
• 在這個(gè)頁(yè)面被第二次打開(kāi)時(shí)，檢查緩存中是否還存有這個(gè)頁(yè)面上一次初始數(shù)據(jù)的渲染結(jié)果，如果有，就直接將渲染結(jié)果展示出來(lái)；
• 如果展示了緩存中的渲染結(jié)果，這個(gè)頁(yè)面暫時(shí)還不能響應(yīng)用戶事件，等到邏輯層初始化完畢后才能響應(yīng)用戶事件。

利用初始渲染緩存，可以：

• 快速展示出頁(yè)面中永遠(yuǎn)不會(huì)變的部分，如導(dǎo)航欄；
• 預(yù)先展示一個(gè)骨架頁(yè)，提升用戶體驗(yàn)；
• 展示自定義的加載提示；
• 提前展示廣告，等等。

支持的組件

在初始渲染緩存階段中，復(fù)雜組件不能被展示或不能響應(yīng)交互。

目前支持的內(nèi)置組件：

自定義組件本身可以被展示（但它們里面用到的內(nèi)置組件也遵循上述限制）。

靜態(tài)初始渲染緩存

若想啟用初始渲染緩存，最簡(jiǎn)單的方法是在頁(yè)面的 json 文件中添加配置項(xiàng) "initialRenderingCache": "static" ：

{
  "initialRenderingCache": "static"
}

如果想要對(duì)所有頁(yè)面啟用，可以在 app.json 的 window 配置段中添加這個(gè)配置：

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

添加這個(gè)配置項(xiàng)之后，在手機(jī)中預(yù)覽小程序首頁(yè)，然后殺死小程序再次進(jìn)入，就會(huì)通過(guò)初始渲染緩存來(lái)渲染首頁(yè)。

注意：這種情況下，初始渲染緩存記錄的是頁(yè)面 data 應(yīng)用在頁(yè)面 WXML 上的結(jié)果，不包含任何 setData 的結(jié)果。

例如，如果想要在頁(yè)面中展示出“正在加載”幾個(gè)字，這幾個(gè)字受到 loading 數(shù)據(jù)字段控制：

正在加載

這種情況下， loading 應(yīng)當(dāng)在 data 中指定為 true ，如：

// 正確的做法
Page({
  data: {
    loading: true
  }
})

而不能通過(guò) setData 將 loading 置為 true ：

// 錯(cuò)誤的做法！不要這么做！
Page({
  data: {},
  onLoad: function() {
    this.setData({
      loading: true
    })
  }
})

換而言之，這種做法只包含頁(yè)面 data 的渲染結(jié)果，即頁(yè)面的純靜態(tài)成分。

在初始渲染緩存中添加動(dòng)態(tài)內(nèi)容

有些場(chǎng)景中，只是頁(yè)面 data 的渲染結(jié)果會(huì)比較局限。有時(shí)會(huì)想要額外展示一些可變的內(nèi)容，如展示的廣告圖片 URL 等。

這種情況下可以使用“動(dòng)態(tài)”初始渲染緩存的方式。首先，配置 "initialRenderingCache": "dynamic" ：

{
  "initialRenderingCache": "dynamic"
}

此時(shí)，初始渲染緩存不會(huì)被自動(dòng)啟用，還需要在頁(yè)面中調(diào)用 this.setInitialRenderingCache(dynamicData) 才能啟用。其中， dynamicData 是一組數(shù)據(jù)，與 data 一起參與頁(yè)面 WXML 渲染。

Page({
  data: {
    loading: true
  },
  onReady: function() {
    this.setInitialRenderingCache({
      loadingHint: '正在加載' // 這一部分?jǐn)?shù)據(jù)將被應(yīng)用于界面上，相當(dāng)于在初始 data 基礎(chǔ)上額外進(jìn)行一次 setData
    })
  }
})

{{loadingHint}}

從原理上說(shuō)，在動(dòng)態(tài)生成初始渲染緩存的方式下，頁(yè)面會(huì)在后臺(tái)使用動(dòng)態(tài)數(shù)據(jù)重新渲染一次，因而開(kāi)銷相對(duì)較大。因而要盡量避免頻繁調(diào)用 this.setInitialRenderingCache ，如果在一個(gè)頁(yè)面內(nèi)多次調(diào)用，僅最后一次調(diào)用生效。

注意：

• this.setInitialRenderingCache 調(diào)用時(shí)機(jī)不能早于 Page 的 onReady 或 Component 的 ready 生命周期，否則可能對(duì)性能有負(fù)面影響。
• 如果想禁用初始渲染緩存，調(diào)用 this.setInitialRenderingCache(null) 。

網(wǎng)站標(biāo)題：創(chuàng)新互聯(lián)小程序教程：微信小程序初始渲染緩存
當(dāng)前網(wǎng)址：http://uogjgqi.cn/article/dpphdii.html