小程序首屏渲染優(yōu)化

頁面首屏渲染的優(yōu)化，目的是讓「首頁渲染完成」(Page.onReady) 盡可能提前。但很多情況下「首頁渲染完成」可能還是空白頁面，因此更重要的是讓用戶能夠更早的看到頁面內(nèi)容（First Paint 或 First Contentful Paint）。

1、 使用「按需注入」和「用時注入」

除了優(yōu)化代碼注入的耗時外，「按需注入」和「用時注入」也可以減少需要初始化的組件數(shù)量，降低實際頁面渲染的耗時，使「首頁渲染完成」提前。

啟用「按需注入」之后，部分組件代碼注入會被延遲到首頁渲染階段執(zhí)行，導(dǎo)致階段耗時上漲，但總耗時一般會下降。

2、 啟用「初始渲染緩存」

自基礎(chǔ)庫版本 2.11.1 起，小程序支持啟用初始渲染緩存。開啟后，可以在非首次啟動時，使視圖層不需要等待邏輯層初始化完畢，而直接提前將頁面渲染結(jié)果展示給用戶，這可以使「首頁渲染完成」和頁面對用戶可見的時間大大提前。

3、 避免引用未使用的自定義組件

在頁面渲染時，會初始化在當前頁面配置和全局配置通過 usingComponents 引用的自定義組件，以及組件所依賴的其他自定義組件。未使用的自定義組件會影響渲染耗時。

當組件不被使用時，應(yīng)及時從 usingComponents 中移除。

4、 精簡首屏數(shù)據(jù)

首頁渲染的耗時與頁面的復(fù)雜程度正相關(guān)。對于復(fù)雜頁面，可以選擇進行漸進式的渲染，根據(jù)頁面內(nèi)容優(yōu)先級，優(yōu)先展示頁面的關(guān)鍵部分，對于非關(guān)鍵部分或者不可見的部分可以延遲更新。

此外，與視圖層渲染無關(guān)的數(shù)據(jù)應(yīng)盡量不要放在 data 中，避免影響頁面渲染時間。

5、 緩存請求數(shù)據(jù)

小程序提供了wx.setStorage、wx.getStorage等讀寫本地緩存的能力，數(shù)據(jù)存儲在本地，返回的會比網(wǎng)絡(luò)請求快。如果開發(fā)者基于某些原因無法采用數(shù)據(jù)預(yù)拉取與周期性更新，我們推薦優(yōu)先從緩存中獲取數(shù)據(jù)來渲染視圖，等待網(wǎng)絡(luò)請求返回后進行更新。

6、 骨架屏

骨架屏通常用于在頁面完全渲染之前，通過一些灰色的區(qū)塊大致勾勒出輪廓，待數(shù)據(jù)加載完成后，再替換成真實的內(nèi)容。

建議開發(fā)者在頁面數(shù)據(jù)未準備好時（例如需要通過網(wǎng)絡(luò)獲?。?，盡量避免展示空白頁面，而是先通過骨架屏展示頁面的大致結(jié)構(gòu)，請求數(shù)據(jù)返回后再進行頁面更新。以提升用戶的等待意愿。

開發(fā)者工具提供了生成骨架屏的能力，幫助開發(fā)者更便捷的維護骨架屏。