當(dāng)談及 Web 性能優(yōu)化時，我們該關(guān)注哪些性能指標(biāo)
前端頁面性能是影響用戶體驗的關(guān)鍵因素，用戶打開網(wǎng)站時間太久、白屏?xí)r間過長、操作卡頓等，都會導(dǎo)致用戶離開頁面，嚴(yán)重影響用戶的留存率。Google DoubleClick 研究表明：如果一個移動端頁面加載時長超過 3 秒，用戶就會放棄而離開。BBC 發(fā)現(xiàn)網(wǎng)頁加載時長每增加 1 秒，用戶就會流失 10%。
那么，如何去計算頁面的性能，以便于更好地衡量和改進(jìn)前端頁面性能，這就需要前端性能指標(biāo)，本文簡單介紹每一種性能指標(biāo)的定義，旨在幫助你理解性能指標(biāo)，具體優(yōu)化及詳細(xì)解讀將在后面章節(jié)中介紹
性能指標(biāo)
以下分為三個過程來看性能指標(biāo)：
文檔加載過程 文檔渲染呈現(xiàn)過程 交互過程
文檔加載過程
下圖是 W3C 的 Navigation Timing 的處理模型，從當(dāng)前瀏覽器窗口卸載舊頁面開始，到新頁面加載完成，整個過程一共被切分為 9 個小塊：
提示卸載舊文檔 重定向/卸載 應(yīng)用緩存 DNS 解析 TCP 握手 HTTP 請求處理 HTTP 響應(yīng)處理 DOM 處理 文檔裝載完成
每個小塊，取 Unix 時間戳，兩兩事件之間計算時間差，從而獲取中間過程的耗時（精確到毫秒級別）。
解讀
文檔加載過程主要包含以下 幾個性能指標(biāo)：
TTFB
Time to First Byte，是發(fā)出頁面請求到接收到應(yīng)答數(shù)據(jù)第一個字節(jié)所花費的毫秒數(shù)，這個時間段內(nèi)包括 DNS 查找、TCP 連接和 SSL 連接
TTFB 不僅僅是在服務(wù)器上花費的時間，還包括設(shè)備請求發(fā)送到服務(wù)器，再從服務(wù)器返回到設(shè)備的時間，它計算的是整個延遲的往返時間。
DCL
DOMContentLoaded，下圖更直觀的表示下
什么是 DOMContentLoaded？
首先我們先思考一下，如何衡量網(wǎng)頁的加載性能？有人認(rèn)為可以通過計算從空白到完全加載的過程，但其實有些圖片等可能加載較慢，但不影響整個頁面的正常使用，所以，我們僅僅需要在空白網(wǎng)頁看到內(nèi)容即可
所以，我們也可以通過計算這個網(wǎng)頁從空白到出現(xiàn)內(nèi)容所花費的時間，來衡量網(wǎng)頁文檔的加載性能，那么該如何計算這段時間喃？DOMContentLoaded 就是，當(dāng)初始的 HTML 文檔被完全加載和解析完成之后，DOMContentLoaded 事件被觸發(fā)，而無需等待樣式表、圖像和子框架的完全加載
L
Load，onLoad 事件觸發(fā)所需時間，僅在頁面所有資源都加載完畢后（比如圖片，CSS），onLoad 事件才被觸發(fā)
文檔渲染呈現(xiàn)過程
FP&FCP
FP（First Paint）：首次繪制，這個指標(biāo)用于記錄頁面第一次繪制像素的時間 FCP（First Contentful Paint）：首次內(nèi)容繪制，這個指標(biāo)用于記錄頁面首次繪制文本、圖片、非空白 Canvas 或 SVG 的時間，也包括帶有正在加載中的 Web 字體的文本
這兩個指標(biāo)看起來大同小異，但是 FP 發(fā)生的時間一定大于等于 FCP，如下圖是掘金的指標(biāo)：
FP 指的是繪制像素，比如說頁面的背景色是灰色的，那么在顯示灰色背景時就記錄下了 FP 指標(biāo)
但是此時 DOM 內(nèi)容還沒開始繪制，可能需要文件下載、解析等過程，只有當(dāng) DOM 內(nèi)容發(fā)生變化才會觸發(fā)，比如說渲染出了一段文字，此時就會記錄下 FCP 指標(biāo)
我們可以把這兩個指標(biāo)認(rèn)為是和白屏?xí)r間相關(guān)的指標(biāo)
FMP
First Meaningful Paint，是指頁面的首要內(nèi)容出現(xiàn)在屏幕上的時間，對于不同的站點，首要內(nèi)容是不同的，例如：
博客文章：【大標(biāo)題 + 首屏文字】是首要內(nèi)容； 百度或 Google 的搜索結(jié)果頁：【首屏的結(jié)果】就是首要內(nèi)容； 淘寶等購物網(wǎng)站：【圖片】會極為重要，因此它是首要內(nèi)容；
在 Lighthouse 6.0 中已不推薦使用 FMP，建議使用 LCP 代替
LCP
Largest Contentful Paint，最大內(nèi)容繪制，用于記錄視窗內(nèi)最大的元素繪制的時間，該時間會隨著頁面渲染變化而變化，因為頁面中的最大元素在渲染過程中可能會發(fā)生改變，另外該指標(biāo)會在用戶第一次交互后停止記錄。指標(biāo)變化如下圖：
LCP 其實能比 FP、FCP、FMP 更能體現(xiàn)一個頁面的性能好壞程度，因為這個指標(biāo)會持續(xù)更新。舉個例子：當(dāng)頁面出現(xiàn)骨架屏或者 Loading 動畫時 FCP 其實已經(jīng)被記錄下來了，但此時頁面內(nèi)容其實并未呈現(xiàn)
在 2.5 秒內(nèi)表示體驗優(yōu)秀
LCP 目前并不會計算所有元素，因為這樣會使這個指標(biāo)變得非常復(fù)雜，它現(xiàn)在只關(guān)注下面的元素：
<img>元素<image>元素內(nèi)的<svg>元素<video>元素通過 url()函數(shù)加載背景圖片的元素包含文本節(jié)點或其他內(nèi)聯(lián)文本元素子級的塊級元素。
SI
Speed Index，用于度量頁面加載過程中內(nèi)容可視化顯示的速度，是 Lighthouse 的六個度量標(biāo)準(zhǔn)之一
具體如何測量喃？首先在瀏覽器中捕獲頁面加載的視頻，然后對每 100 毫秒間隔的頁面截圖計算頁面填充的百分比，可以得到這樣一個曲線（縱軸是頁面可視區(qū)域內(nèi)容填充完成度，橫軸是時間）
上圖中的兩個都是在 10s 時頁面填充完成，但Example 1（左圖）在 2s 是就已經(jīng)填充了 80% 的內(nèi)容，而 Example 2（右圖）在 8s 時才填充 80%
計算 SI ：
Example 1：Speed Index = (80% * 2) + （20% * 10）= 3.6
Example 2：Speed Index = (80% * 8) + （20% * 10）= 8.4
其中，SI：0-3.4 為最優(yōu)
FSP
First Screen Paint，即頁面從開始加載到首屏內(nèi)容全部繪制完成的時間，用戶可以看到首屏的全部內(nèi)容
交互過程
TTI
Time to Interactive，用于表示網(wǎng)頁首次完全達(dá)到可交互狀態(tài)的時間點
完全達(dá)到可交互狀態(tài)的時間點是從 FCP 開始，在最后一個長任務(wù)（Long Task）完成的時間，并且在隨后的 5 秒內(nèi)網(wǎng)絡(luò)和主線程是空閑的，如下圖：
Google 提出了一個 RAIL 模型：對于用戶交互（比如點擊事件），推薦的響應(yīng)時間是 100ms 以內(nèi)。那么為了達(dá)成這個目標(biāo)，推薦在空閑時間里執(zhí)行任務(wù)不超過 50ms（W3C 也有這樣的標(biāo)準(zhǔn)規(guī)定），這樣能在用戶無感知的情況下響應(yīng)用戶的交互，否則就會造成延遲感
這是一個很重要的用戶體驗指標(biāo)，代表著頁面何時真正進(jìn)入可用的狀態(tài)。畢竟光內(nèi)容渲染的快也不夠，還要能迅速響應(yīng)用戶的交互。想必大家應(yīng)該體驗過某些網(wǎng)站，雖然內(nèi)容渲染出來了，但是響應(yīng)交互很卡頓，只能過一會才能流暢交互的情況。
FCI
First CPU Idle，頁面首可交互時間
與 TTI 不同的是：FCI 發(fā)生在用戶可以開始與頁面交互時；TTI 發(fā)生在用戶完全能夠（可持續(xù)）與頁面交互時
FID
First Input Delay，首次輸入延遲，用于記錄在 FCP 和 TTI 之間用戶首次與頁面交互時響應(yīng)的延遲
就是看用戶交互事件觸發(fā)到頁面響應(yīng)中間耗時多少，如果其中有長任務(wù)發(fā)生的話那么勢必會造成響應(yīng)時間變長
FPS
Frames Per Second，用于表示每秒可以重新繪制的幀數(shù)，是衡量應(yīng)用流暢度的一個非常重要的指標(biāo)，60fps（每次繪制 16.7ms） 是頁面流暢的目標(biāo)，否則用戶便會感覺到頁面卡頓
核心性能指標(biāo)
以上我們學(xué)習(xí)了 13 個性能指標(biāo)，但最常用、最關(guān)鍵的是以下四個核心指標(biāo)：
白屏?xí)r間：頁面空白時間，F(xiàn)P&FCP 首屏?xí)r間：頁面可視區(qū)域內(nèi)容以完全呈現(xiàn)時間，F(xiàn)SP 可交互時間：用戶首次可交互時間，F(xiàn)CI 可持續(xù)交互時間：用戶首次可完全可持續(xù)交互時間，TTI
總結(jié)與思考
本文，我們學(xué)習(xí)了從文檔加載到用戶交互所涉及的性能指標(biāo)：
文檔加載過程： TTFB：從請求開始到接收第一字節(jié)的時間 DCL：空白到出現(xiàn)內(nèi)容所花費的時間 L：onLoad 事件觸發(fā)所需時間 渲染呈現(xiàn)過程： FP&FCP：首次繪制（FP，可能是背景色或loading），首次內(nèi)容繪制時間（FCP） FMP：首要內(nèi)容出現(xiàn)在屏幕上的時間 LCP：視窗內(nèi)最大的元素繪制的時 SI：頁面加載過程中內(nèi)容可視化顯示的速度 FSP：從開始加載到首屏內(nèi)容全部繪制完成的時間 交互過程： TTI：網(wǎng)頁首次完全達(dá)到可交互狀態(tài)的時間點 FCI：頁面首可交互時間 FID：首次輸入延遲 FPS：每秒可以重新繪制的幀數(shù)，用于衡量應(yīng)用流暢度
其中最重要的是白屏?xí)r間（FP&FCP）、首屏?xí)r間（FSP）、可交互時間（FCI）、可持續(xù)交互時間（TTI），下一章，我們將走進(jìn)新一代性能指標(biāo) Web Vitals
參考鏈接
MDN Web 性能指標(biāo)：https://juejin.cn/post/6844904153869713416