网站性能指标 - FMP
對于前端童鞋來說，優(yōu)化是一個永恒的話題。上線并不是網(wǎng)站開發(fā)的終點，如何吸引用戶、提升用戶體驗，應(yīng)該成為我們 F2E 的追求目標(biāo)。
如果你對優(yōu)化還不了解，建議先閱讀如下兩篇文章：
當(dāng)然，衡量網(wǎng)站性能的指標(biāo)有很多，今天我們就來看一個「令人費解而又頭疼」的指標(biāo) - FMP。
First Meaningful Paint 是指頁面的首要內(nèi)容出現(xiàn)在屏幕上的時間。
一、FMP 之怪現(xiàn)象
目前尚無標(biāo)準(zhǔn)化的 FMP 定義，因此也沒有性能條目類型。 部分原因在于很難以通用的方式確定「有效」對于所有頁面意味著什么。但是，一般來說，在單個頁面或單個應(yīng)用中，最好是將 FMP 視為主角元素呈現(xiàn)在屏幕上的時刻。
所以，我們經(jīng)常會面臨這樣的問題：
FCP 在可接受范圍，但是 FMP 卻完全失控。
也可能是這樣的問題：
或許還有這樣的問題：
為什么結(jié)構(gòu)類似的站點，FMP 加載卻千差萬別。要了解 FMP 我們需要知道它的計算規(guī)則，下面讓我們一層層抽絲剝繭。
二、刨根問底
究竟是什么導(dǎo)致 FMP 的時機(jī)差距如此之大？或許我們可以從 FMP 定義來說起。
When FMP and FCP are the same time in seconds, they share the same identical score. If FMP is slower than FCP, say when there's iframe content loading, then the FMP score will be lower than the FCP score.
什么意思呢，我們先來看一張官方圖片：
如果 FCP 是 1.5s，FMP 是 3s，那么 FCP 分?jǐn)?shù)將會是 99，但是 FMP 分?jǐn)?shù)將是 75。
除了上述影響外，我們還需要關(guān)注 Lighthouse V3 的記分規(guī)則：
雖然 FMP 權(quán)重僅為 1 ，很遺憾，因為如上規(guī)則的存在，我們站點無法到達(dá)滿分💯。
確定頁面上最關(guān)鍵的主角元素之后，我們應(yīng)確保初始腳本加載僅包含渲染這些元素并使其可交互所需的代碼。
相關(guān)源碼：
Lighthouse FMP 源碼
Score a perfect 100 in Lighthouse audits
三、重要結(jié)論
了解了相關(guān)計算規(guī)則之后，我們繼續(xù)來剖析 FMP。對于不同的站點，首要內(nèi)容是不同的，例如：
- 對于博客文章：「大標(biāo)題」 + 「首屏文字」是首要內(nèi)容；
- 對于百度或者 Google 的搜索結(jié)果頁：「首屏的結(jié)果」就是首要內(nèi)容；
- 對于淘寶等購物網(wǎng)站來說，圖片會極為重要，因此它是首要內(nèi)容；
需要注意的是，通常首要內(nèi)容是不包括 Headers 和導(dǎo)航條的。
為了方便理解，我們用一個簡單的公式表示：「首次有效繪制 = 具有最大布局變化的繪制」。
很好，此刻我們不用糾結(jié)「首次有效渲染」了，轉(zhuǎn)而去了解「最大布局變化的繪制」?；?Chromium 的實現(xiàn)，這個繪制是使用 LayoutAnalyzer 進(jìn)行計算的，它會收集所有的布局變化，當(dāng)布局發(fā)生最大變化時得出時間。
具有最大布局變化的繪制如何計算呢？
1.偵聽頁面元素的變化；
2.遍歷每次新增的元素，并計算這些元素的得分總；
3.如果元素可見，得分為 1 * weight，如果元素不可見，得分為 0；
還是很抽象，我們繼續(xù)探索 LayoutAnalyzer，在源碼中得到如下公式：
布局顯著性 = 添加的對象數(shù)目 / max(1, 頁面高度 / 屏幕高度)
這下清晰了，既然可以算出來，那么優(yōu)化 FMP 指日可待。從上面可以看出來「布局顯著性」是通過添加對象數(shù)目與頁面高度來計算的。似乎對象數(shù)目成了解決問題的關(guān)鍵節(jié)點。
我們繼續(xù)探索，如何去找到對象數(shù)目呢？很簡單，打開 Chrome DevTool，切到 Layout 面板。如果你還不會使用 Layout 面板，可以先看看網(wǎng)站優(yōu)化工具。
這里就不展開了，直接上圖，看看紅框部分：
驚不驚喜，我們精簡 DOM 似乎可以將公式中分子變小，或者讓頁面高度大于屏幕高度。到這里，所有謎團(tuán)都解開了，優(yōu)化 FMP 也就變得毫無挑戰(zhàn)了。
相關(guān)源碼：
LayoutAnalyzer 源碼
Tracing Results
Understanding about:tracing results
五、總結(jié)
我們從撲簌迷離的 FMP 表象一層層找到了 Lighthouse 的記分規(guī)則，又從 Tracing Results 中得知最大布局變化的計算規(guī)則，因此轉(zhuǎn)向 LayoutAnalyzer 源碼研究，最終找到 Layout Objects，從而解決了問題。雖然波折，但結(jié)局令人舒適。
最后，再啰嗦一下，以下結(jié)論對理解 FMP 很重要：
- 對于博客文章：「大標(biāo)題」 + 「首屏文字」是首要內(nèi)容；
- 對于百度或者 Google 的搜索結(jié)果頁：「首屏的結(jié)果」就是首要內(nèi)容；
- 對于淘寶等購物網(wǎng)站來說，圖片會極為重要，因此它是首要內(nèi)容；
如果你覺得還是過于復(fù)雜，不妨去試試 SSR 吧，FMP 將不再是煩惱。
文章最后，打個小廣告吧。如果你想搭上在線教育的快車，快速成長，不妨加入我們。一起成長，一起學(xué)習(xí)，一起挑戰(zhàn)更多有趣的事情，「跟誰學(xué)-高途課堂」歡迎你，請將簡歷私我～
總結(jié)
以上是生活随笔為你收集整理的网站性能指标 - FMP的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Hive深入浅出
- 下一篇： 讯时后台编辑器在IE8下无法打开窗口的解