微信小程序開發(fā)初始渲染緩存

在小程序中，啟動頁面時邏輯層初始化的時間較長，這會使得用戶看到冷啟動畫面或白屏現(xiàn)象，影響體驗。為了緩解這個問題，我們可以使用初始渲染緩存來提高頁面加載速度。

1. 初始渲染緩存工作原理

小程序頁面的初始化分為兩個部分，邏輯層初始化和視圖層初始化。啟用初始渲染緩存可以使得頁面對用戶可見的時間大大提前，其工作原理包括：

• 在第一個打開頁面時，將頁面初始數據渲染結果記錄下來，寫入一個持久化的緩存區(qū)域；
• 在這個頁面被第二次打開時，直接將渲染結果展示出來，不需要等待邏輯層初始化完畢；
• 如果展示了緩存中的渲染結果，這個頁面暫時還不能響應用戶事件，等到邏輯層初始化完畢后才能響應用戶事件。

2. 支持的組件

在初始渲染緩存階段中，復雜組件不能被展示或不能響應交互。目前支持的內置組件包括：<view />、<text />、<button />、<image />、<scroll-view />、<rich-text />，自定義組件本身可以被展示。

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

若想啟用靜態(tài)初始渲染緩存，最簡單的方法是在頁面的 json 文件中添加配置項 "initialRenderingCache": "static"，或者在 app.json 的 window 配置段中添加這個配置。此種情況下，緩存記錄的是頁面 data 應用在頁面 WXML 上的結果，不包含任何 setData 的結果。想要在初始渲染緩存中添加動態(tài)內容，則需要使用“動態(tài)”初始渲染緩存的方式。

4. 動態(tài)初始渲染緩存

與靜態(tài)緩存不同的是，在動態(tài)生成初始渲染緩存的方式下，頁面會在后臺使用動態(tài)數據重新渲染一次，因而開銷較大。因而要盡量避免頻繁調用 this.setInitialRenderingCache()，如果在一個頁面內多次調用，僅最后一次調用生效。調用時機不能早于 Page 的 onReady 或 Component 的 ready 生命周期，否則可能對性能有負面影響。如果想禁用初始渲染緩存，則需要調用 this.setInitialRenderingCache(null)。

<本文由himall原創(chuàng)，商業(yè)轉載請聯(lián)系作者獲得授權，非商業(yè)轉載請標明：himall原創(chuàng)>