# 首屏渲染優(yōu)化

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

# 1. 使用「按需注入」和「用時(shí)注入」

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

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

# 2. 啟用「初始渲染緩存」

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

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

在頁(yè)面渲染時(shí)，會(huì)初始化在當(dāng)前頁(yè)面配置和全局配置通過(guò) usingComponents 引用的自定義組件，以及組件所依賴(lài)的其他自定義組件。未使用的自定義組件會(huì)影響渲染耗時(shí)。

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

# 4. 精簡(jiǎn)首屏數(shù)據(jù)

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

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

# 5. 提前首屏數(shù)據(jù)請(qǐng)求

很多小程序在渲染首頁(yè)時(shí)，需要依賴(lài)服務(wù)端的接口數(shù)據(jù)（如商品列表等），此時(shí)小程序的首頁(yè)可能是空白或者骨架屏。

由于網(wǎng)絡(luò)請(qǐng)求需要相對(duì)較長(zhǎng)的時(shí)間，我們建議開(kāi)發(fā)者在 Page.onLoad 或更早的時(shí)機(jī)發(fā)起網(wǎng)絡(luò)請(qǐng)求，而不應(yīng)等待 Page.onReady 之后再進(jìn)行。

為了進(jìn)一步提前請(qǐng)求發(fā)起的時(shí)機(jī)，小程序?yàn)殚_(kāi)發(fā)者提供了以下能力：

• 數(shù)據(jù)預(yù)拉取：能夠在小程序冷啟動(dòng)時(shí)，由微信客戶(hù)端通過(guò)微信后臺(tái)提前向第三方服務(wù)器拉取業(yè)務(wù)數(shù)據(jù)，當(dāng)代碼包加載完時(shí)可以更快地渲染頁(yè)面，減少用戶(hù)等待時(shí)間。
• 周期性更新：在用戶(hù)未打開(kāi)小程序的情況下，也能從服務(wù)器提前拉取數(shù)據(jù)，當(dāng)用戶(hù)打開(kāi)小程序時(shí)可以更快地渲染頁(yè)面，減少用戶(hù)等待時(shí)間。

# 6. 緩存請(qǐng)求數(shù)據(jù)

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

# 7. 骨架屏

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

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

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