微信小程序 初始渲染緩存

初始渲染緩存

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

初始渲染緩存工作原理

小程序頁面的初始化分為兩個部分。

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

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

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

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

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

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

支持的組件

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

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

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

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

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

若想啟用初始渲染緩存，最簡單的方法是在頁面的 json 文件中添加配置項 "initialRenderingCache": "static" ：

{
  "initialRenderingCache": "static"
}

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

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

添加這個配置項之后，在手機中預(yù)覽小程序首頁，然后殺死小程序再次進入，就會通過初始渲染緩存來渲染首頁。

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

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

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

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

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

而不能通過 setData 將 loading 置為 true ：

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

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

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

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

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

{
  "initialRenderingCache": "dynamic"
}

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

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

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

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

注意：

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