前端黑科技:美團(tuán)網(wǎng)頁首幀優(yōu)化實(shí)踐

瀏覽器渲染

Dev tools
等待 HTML 文檔返回,此時(shí)處于白屏狀態(tài)。
對 HTML 文檔解析完成后進(jìn)行首屏渲染,因?yàn)轫?xiàng)目中對 id="app 加了灰色的背景色,因此呈現(xiàn)出灰屏。
進(jìn)行文件加載、JS 解析等過程,導(dǎo)致界面長時(shí)間出于灰屏中。當(dāng) Vue 實(shí)例觸發(fā)了 mounted 后,界面顯示出大體框架。
調(diào)用 API 獲取到時(shí)機(jī)業(yè)務(wù)數(shù)據(jù)后才能展示出最終的頁面內(nèi)容。

4 個(gè)頁面渲染的關(guān)鍵指標(biāo)

FP

FCP

FMP
FP:僅有一個(gè) div 根節(jié)點(diǎn)。
FCP:包含頁面的基本框架,但沒有數(shù)據(jù)內(nèi)容。
FMP:包含頁面所有元素及數(shù)據(jù)。
仍然以 Vue 為例, 在其生命周期中,mounted 對應(yīng)的是 FCP,updated 對應(yīng)的是 FMP。那么具體應(yīng)該使用哪個(gè)生命周期的 HTML 結(jié)構(gòu)呢?