對於前端童鞋來說，優化是一個永恆的話題。上線並不是網站開發的終點，如何吸引用戶、提升用戶體驗，應該成爲我們 F2E 的追求目標。
如果你對優化還不瞭解，建議先閱讀如下兩篇文章：
當然，衡量網站性能的指標有很多，今天我們就來看一個「令人費解而又頭疼」的指標 - FMP。
First Meaningful Paint 是指頁面的首要內容出現在屏幕上的時間。
一、FMP 之怪現象
目前尚無標準化的 FMP 定義，因此也沒有性能條目類型。 部分原因在於很難以通用的方式確定「有效」對於所有頁面意味着什麼。但是，一般來說，在單個頁面或單個應用中，最好是將 FMP 視爲主角元素呈現在屏幕上的時刻。
所以，我們經常會面臨這樣的問題：
FCP 在可接受範圍，但是 FMP 卻完全失控。
也可能是這樣的問題：
或許還有這樣的問題：
爲什麼結構類似的站點，FMP 加載卻千差萬別。要了解 FMP 我們需要知道它的計算規則，下面讓我們一層層抽絲剝繭。
二、刨根問底
究竟是什麼導致 FMP 的時機差距如此之大？或許我們可以從 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 分數將會是 99，但是 FMP 分數將是 75。
除了上述影響外，我們還需要關注 Lighthouse V3 的記分規則：
雖然 FMP 權重僅爲 1 ，很遺憾，因爲如上規則的存在，我們站點無法到達滿分💯。
確定頁面上最關鍵的主角元素之後，我們應確保初始腳本加載僅包含渲染這些元素並使其可交互所需的代碼。
相關源碼：
Lighthouse FMP 源碼
Score a perfect 100 in Lighthouse audits
三、重要結論
瞭解了相關計算規則之後，我們繼續來剖析 FMP。對於不同的站點，首要內容是不同的，例如：
- 對於博客文章：「大標題」 + 「首屏文字」是首要內容；
- 對於百度或者
Google的搜索結果頁：「首屏的結果」就是首要內容； - 對於淘寶等購物網站來說，圖片會極爲重要，因此它是首要內容；
需要注意的是，通常首要內容是不包括 Headers 和導航條的。
爲了方便理解，我們用一個簡單的公式表示：「首次有效繪製 = 具有最大布局變化的繪製」。
很好，此刻我們不用糾結「首次有效渲染」了，轉而去了解「最大布局變化的繪製」。基於 Chromium 的實現，這個繪製是使用 LayoutAnalyzer 進行計算的，它會收集所有的佈局變化，當佈局發生最大變化時得出時間。
具有最大布局變化的繪製如何計算呢？
1.偵聽頁面元素的變化；
2.遍歷每次新增的元素，並計算這些元素的得分總；
3.如果元素可見，得分爲 1 * weight，如果元素不可見，得分爲 0；
還是很抽象，我們繼續探索 LayoutAnalyzer，在源碼中得到如下公式：
佈局顯著性 = 添加的對象數目 / max(1, 頁面高度 / 屏幕高度)
這下清晰了，既然可以算出來，那麼優化 FMP 指日可待。從上面可以看出來「佈局顯著性」是通過添加對象數目與頁面高度來計算的。似乎對象數目成了解決問題的關鍵節點。
我們繼續探索，如何去找到對象數目呢？很簡單，打開 Chrome DevTool，切到 Layout 面板。如果你還不會使用 Layout 面板，可以先看看網站優化工具。
這裏就不展開了，直接上圖，看看紅框部分：
驚不驚喜，我們精簡 DOM 似乎可以將公式中分子變小，或者讓頁面高度大於屏幕高度。到這裏，所有謎團都解開了，優化 FMP 也就變得毫無挑戰了。
相關源碼：
LayoutAnalyzer 源碼
Tracing Results
Understanding about:tracing results
五、總結
我們從撲簌迷離的 FMP 表象一層層找到了 Lighthouse 的記分規則，又從 Tracing Results 中得知最大布局變化的計算規則，因此轉向 LayoutAnalyzer 源碼研究，最終找到 Layout Objects，從而解決了問題。雖然波折，但結局令人舒適。
最後，再囉嗦一下，以下結論對理解 FMP 很重要：
- 對於博客文章：「大標題」 + 「首屏文字」是首要內容；
- 對於百度或者
Google的搜索結果頁：「首屏的結果」就是首要內容； - 對於淘寶等購物網站來說，圖片會極爲重要，因此它是首要內容；
如果你覺得還是過於複雜，不妨去試試 SSR 吧，FMP 將不再是煩惱。
文章最後，打個小廣告吧。如果你想搭上在線教育的快車，快速成長，不妨加入我們。一起成長，一起學習，一起挑戰更多有趣的事情，「跟誰學-高途課堂」歡迎你，請將簡歷私我～