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