前端黑科技：美團(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)呢？
