當談及 Web 性能優(yōu)化時，我們該關(guān)注哪些性能指標

前端頁面性能是影響用戶體驗的關(guān)鍵因素，用戶打開網(wǎng)站時間太久、白屏時間過長、操作卡頓等，都會導致用戶離開頁面，嚴重影響用戶的留存率。Google DoubleClick 研究表明：如果一個移動端頁面加載時長超過 3 秒，用戶就會放棄而離開。BBC 發(fā)現(xiàn)網(wǎng)頁加載時長每增加 1 秒，用戶就會流失 10%。

那么，如何去計算頁面的性能，以便于更好地衡量和改進前端頁面性能，這就需要前端性能指標，本文簡單介紹每一種性能指標的定義，旨在幫助你理解性能指標，具體優(yōu)化及詳細解讀將在后面章節(jié)中介紹

性能指標

以下分為三個過程來看性能指標：

• 文檔加載過程
• 文檔渲染呈現(xiàn)過程
• 交互過程

文檔加載過程

下圖是 W3C 的 Navigation Timing 的處理模型，從當前瀏覽器窗口卸載舊頁面開始，到新頁面加載完成，整個過程一共被切分為 9 個小塊：

• 提示卸載舊文檔
• 重定向/卸載
• 應用緩存
• DNS 解析
• TCP 握手
• HTTP 請求處理
• HTTP 響應處理
• DOM 處理
• 文檔裝載完成

每個小塊，取 Unix 時間戳，兩兩事件之間計算時間差，從而獲取中間過程的耗時（精確到毫秒級別）。

解讀

文檔加載過程主要包含以下 幾個性能指標：

TTFB

Time to First Byte，是發(fā)出頁面請求到接收到應答數(shù)據(jù)第一個字節(jié)所花費的毫秒數(shù)，這個時間段內(nèi)包括 DNS 查找、TCP 連接和 SSL 連接

TTFB 不僅僅是在服務(wù)器上花費的時間，還包括設(shè)備請求發(fā)送到服務(wù)器，再從服務(wù)器返回到設(shè)備的時間，它計算的是整個延遲的往返時間。

DCL

DOMContentLoaded，下圖更直觀的表示下

什么是 DOMContentLoaded？

首先我們先思考一下，如何衡量網(wǎng)頁的加載性能？有人認為可以通過計算從空白到完全加載的過程，但其實有些圖片等可能加載較慢，但不影響整個頁面的正常使用，所以，我們僅僅需要在空白網(wǎng)頁看到內(nèi)容即可

所以，我們也可以通過計算這個網(wǎng)頁從空白到出現(xiàn)內(nèi)容所花費的時間，來衡量網(wǎng)頁文檔的加載性能，那么該如何計算這段時間喃？DOMContentLoaded 就是，當初始的 HTML 文檔被完全加載和解析完成之后，DOMContentLoaded 事件被觸發(fā)，而無需等待樣式表、圖像和子框架的完全加載

L

Load，onLoad 事件觸發(fā)所需時間，僅在頁面所有資源都加載完畢后（比如圖片，CSS），onLoad 事件才被觸發(fā)

文檔渲染呈現(xiàn)過程

FP&FCP

• FP（First Paint）：首次繪制，這個指標用于記錄頁面第一次繪制像素的時間
• FCP（First Contentful Paint）：首次內(nèi)容繪制，這個指標用于記錄頁面首次繪制文本、圖片、非空白 Canvas 或 SVG 的時間，也包括帶有正在加載中的 Web 字體的文本

這兩個指標看起來大同小異，但是 FP 發(fā)生的時間一定大于等于 FCP，如下圖是掘金的指標：

FP 指的是繪制像素，比如說頁面的背景色是灰色的，那么在顯示灰色背景時就記錄下了 FP 指標

但是此時 DOM 內(nèi)容還沒開始繪制，可能需要文件下載、解析等過程，只有當 DOM 內(nèi)容發(fā)生變化才會觸發(fā)，比如說渲染出了一段文字，此時就會記錄下 FCP 指標

我們可以把這兩個指標認為是和白屏時間相關(guān)的指標

FMP

First Meaningful Paint，是指頁面的首要內(nèi)容出現(xiàn)在屏幕上的時間，對于不同的站點，首要內(nèi)容是不同的，例如：

• 博客文章：【大標題 + 首屏文字】是首要內(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ā)生改變，另外該指標會在用戶第一次交互后停止記錄。指標變化如下圖：

LCP 其實能比 FP、FCP、FMP 更能體現(xiàn)一個頁面的性能好壞程度，因為這個指標會持續(xù)更新。舉個例子：當頁面出現(xiàn)骨架屏或者 Loading 動畫時 FCP 其實已經(jīng)被記錄下來了，但此時頁面內(nèi)容其實并未呈現(xiàn)

在 2.5 秒內(nèi)表示體驗優(yōu)秀

LCP 目前并不會計算所有元素，因為這樣會使這個指標變得非常復雜，它現(xiàn)在只關(guān)注下面的元素：

• <img> 元素
• <image>元素內(nèi)的<svg>元素
• <video> 元素
• 通過 url() 函數(shù)加載背景圖片的元素
• 包含文本節(jié)點或其他內(nèi)聯(lián)文本元素子級的塊級元素。

SI

Speed Index，用于度量頁面加載過程中內(nèi)容可視化顯示的速度，是 Lighthouse 的六個度量標準之一

具體如何測量喃？首先在瀏覽器中捕獲頁面加載的視頻，然后對每 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)頁首次完全達到可交互狀態(tài)的時間點

完全達到可交互狀態(tài)的時間點是從 FCP 開始，在最后一個長任務(wù)（Long Task）完成的時間，并且在隨后的 5 秒內(nèi)網(wǎng)絡(luò)和主線程是空閑的，如下圖：

Google 提出了一個 RAIL 模型：對于用戶交互（比如點擊事件），推薦的響應時間是 100ms 以內(nèi)。那么為了達成這個目標，推薦在空閑時間里執(zhí)行任務(wù)不超過 50ms（W3C 也有這樣的標準規(guī)定），這樣能在用戶無感知的情況下響應用戶的交互，否則就會造成延遲感

這是一個很重要的用戶體驗指標，代表著頁面何時真正進入可用的狀態(tài)。畢竟光內(nèi)容渲染的快也不夠，還要能迅速響應用戶的交互。想必大家應該體驗過某些網(wǎng)站，雖然內(nèi)容渲染出來了，但是響應交互很卡頓，只能過一會才能流暢交互的情況。

FCI

First CPU Idle，頁面首可交互時間

與 TTI 不同的是：FCI 發(fā)生在用戶可以開始與頁面交互時；TTI 發(fā)生在用戶完全能夠（可持續(xù)）與頁面交互時

FID

First Input Delay，首次輸入延遲，用于記錄在 FCP 和 TTI 之間用戶首次與頁面交互時響應的延遲

就是看用戶交互事件觸發(fā)到頁面響應中間耗時多少，如果其中有長任務(wù)發(fā)生的話那么勢必會造成響應時間變長

FPS

Frames Per Second，用于表示每秒可以重新繪制的幀數(shù)，是衡量應用流暢度的一個非常重要的指標，60fps（每次繪制 16.7ms） 是頁面流暢的目標，否則用戶便會感覺到頁面卡頓

核心性能指標

以上我們學習了 13 個性能指標，但最常用、最關(guān)鍵的是以下四個核心指標：

• 白屏時間：頁面空白時間，F(xiàn)P&FCP
• 首屏時間：頁面可視區(qū)域內(nèi)容以完全呈現(xiàn)時間，F(xiàn)SP
• 可交互時間：用戶首次可交互時間，F(xiàn)CI
• 可持續(xù)交互時間：用戶首次可完全可持續(xù)交互時間，TTI

總結(jié)與思考

本文，我們學習了從文檔加載到用戶交互所涉及的性能指標：

• 文檔加載過程：
• 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)頁首次完全達到可交互狀態(tài)的時間點
• FCI：頁面首可交互時間
• FID：首次輸入延遲
• FPS：每秒可以重新繪制的幀數(shù)，用于衡量應用流暢度

其中最重要的是白屏時間（FP&FCP）、首屏時間（FSP）、可交互時間（FCI）、可持續(xù)交互時間（TTI），下一章，我們將走進新一代性能指標 Web Vitals

參考鏈接

• MDN
• Web 性能指標：https://juejin.cn/post/6844904153869713416