在構(gòu)建高性能的前端應(yīng)用時(shí)，了解并掌握前端性能指標(biāo)是至關(guān)重要的。這些指標(biāo)不僅可以幫助我們?cè)u(píng)估應(yīng)用的性能，還能指導(dǎo)我們進(jìn)行針對(duì)性的優(yōu)化，從而提升用戶體驗(yàn)。本文將從加載和交互兩個(gè)維度，全面介紹前端性能指標(biāo)，幫助你一網(wǎng)打盡前端性能優(yōu)化的關(guān)鍵要點(diǎn)！

加載相關(guān)

FCP：首次內(nèi)容繪制

FCP 全稱為 First Contentful Paint，即首次內(nèi)容繪制，表示頁(yè)面繪制其第一個(gè)非白色元素（如文本、圖像、非空白 canvas 或 SVG）所需的時(shí)間。

在下圖中，F(xiàn)CP 發(fā)生在第二張圖時(shí)：

圖片

這個(gè)指標(biāo)直接關(guān)系到用戶的體驗(yàn)，如果 FCP 時(shí)間過長(zhǎng)，用戶將會(huì)面對(duì)長(zhǎng)時(shí)間的空白頁(yè)面，進(jìn)而可能誤以為網(wǎng)站故障，甚至選擇離開并尋找其他選項(xiàng)。雖然 FCP 并不涵蓋整個(gè)頁(yè)面的加載時(shí)間，但它卻反映了用戶開始與頁(yè)面進(jìn)行視覺交互的速度。

在 Chrome DevTools 的 Lighthouse 面板中可以測(cè)量 FCP 得分：

圖片

理想的 FCP 時(shí)間應(yīng)控制在 1.8 秒之內(nèi)：可以考慮通過以下方式來(lái)優(yōu)化 FCP 時(shí)間：

• 降低服務(wù)器響應(yīng)時(shí)間：確保服務(wù)器能迅速響應(yīng)請(qǐng)求，這樣瀏覽器就能更快地開始處理并渲染頁(yè)面內(nèi)容。可以通過優(yōu)化服務(wù)端代碼、改善靜態(tài)資源的提供方式（如將圖片部署到 CDN）來(lái)實(shí)現(xiàn)。
• 延遲加載非關(guān)鍵資源：對(duì)于非關(guān)鍵的腳本和 CSS 樣式表，使用defer屬性或async屬性（對(duì)于腳本）來(lái)延遲加載，這樣它們就不會(huì)阻塞頁(yè)面的初次渲染。
• 移除不必要的資源：檢查頁(yè)面并移除那些未被使用的樣式表和JavaScript腳本，這些不必要的資源會(huì)拖慢 FCP 的時(shí)間。
• 內(nèi)聯(lián)關(guān)鍵樣式：雖然這種做法會(huì)受到質(zhì)疑，但如內(nèi)聯(lián)一些關(guān)鍵的 CSS 樣式確實(shí)可以減少瀏覽器解析外部資源所需的時(shí)間，從而加快渲染速度。

LCP：最大內(nèi)容繪制

LCP 全稱為 Largest Contentful Paint，即最大內(nèi)容繪制，用于記錄視窗內(nèi)最大的元素繪制的時(shí)間，這個(gè)時(shí)間會(huì)隨著頁(yè)面渲染變化而變化，因?yàn)轫?yè)面中的最大元素在渲染過程中可能會(huì)發(fā)生改變，該指標(biāo)會(huì)在用戶第一次交互后停止記錄。

在下圖中，LCP 發(fā)生在第三張圖時(shí)：

圖片

根據(jù)規(guī)范，LCP 考慮的元素類型包括：

• <img> 元素。
• <svg> 元素內(nèi)嵌的 <image> 元素。
• <video> 元素。
• 使用 url() 函數(shù)加載背景圖片的元素。
• 包含文本節(jié)點(diǎn)或其他內(nèi)嵌文本元素子元素的塊級(jí)元素。

在 Chrome DevTools 的 Lighthouse 面板中可以測(cè)量 LCP 得分：

圖片

理想的 LCP 時(shí)間應(yīng)控制在 2.5 秒之內(nèi)：

圖片

TTFB：首字節(jié)時(shí)間

TTFB，全稱為 Time to First Byte，即首字節(jié)時(shí)間，表示從點(diǎn)擊網(wǎng)頁(yè)到接收到第一個(gè)字節(jié)的時(shí)間。

在下圖中，TTFB 測(cè)量的是 startTime 和 responseStart 之間的時(shí)間總和：

圖片

這個(gè)時(shí)間段包括：

• 重定向時(shí)間
• Service Worker 啟動(dòng)時(shí)間
• DNS 查找
• 連接和 TLS 協(xié)商
• 請(qǐng)求，直到響應(yīng)的第一個(gè)字節(jié)到達(dá)

理想的 TTFB 時(shí)間應(yīng)控制在 800 毫秒之內(nèi)：

圖片

TBT：總阻塞時(shí)間

TBT 全稱為 Total Blocking Time，即總阻塞時(shí)間，用于衡量的是長(zhǎng)任務(wù)對(duì)主線程的阻塞時(shí)間總和。即從首次內(nèi)容繪制（FCP）到頁(yè)面達(dá)到可交互時(shí)間（TTI）期間，主線程因運(yùn)行長(zhǎng)任務(wù)而被阻塞的總時(shí)間，因此，TBT 會(huì)對(duì)首次輸入延遲有很大影響。長(zhǎng)任務(wù)是指那些執(zhí)行時(shí)間超過 50 毫秒的 JavaScript 任務(wù)，因?yàn)樗鼈兛赡軙?huì)阻塞頁(yè)面的渲染和響應(yīng)，從而影響用戶體驗(yàn)。

在 Chrome DevTools 的 Lighthouse 面板中可以測(cè)量 TBT 得分：

圖片

減少 TBT 時(shí)間的方式包括：

• 減輕第三方代碼的影響
• 縮短JavaScript執(zhí)行時(shí)間
• 減少主線程的工作量
• 控制請(qǐng)求數(shù)量和傳輸大小

理想情況下，TBT 在移動(dòng)設(shè)備上應(yīng)低于 300 毫秒，在桌面 Web 上應(yīng)低于 100 毫秒。

FMP：首次有效渲染

FMP 全稱為 First Meaningful Paint，即首次有效渲染。它衡量的是從用戶開始加載頁(yè)面到瀏覽器首次渲染出對(duì)用戶來(lái)說有意義的內(nèi)容（如文本、圖片、按鈕等可交互元素）所花費(fèi)的時(shí)間。

FMP 的計(jì)算比較復(fù)雜，因?yàn)樗婕暗健坝幸饬x”內(nèi)容的定義。在實(shí)際應(yīng)用中，通常需要根據(jù)具體的應(yīng)用場(chǎng)景和用戶需求來(lái)確定哪些內(nèi)容被認(rèn)為是“有意義”的。

圖片

FP：首次繪制

FP 全稱為 First Paint，即首次繪制，表示瀏覽器首次將像素渲染到屏幕上的時(shí)間點(diǎn)。在性能統(tǒng)計(jì)指標(biāo)中，從用戶開始訪問 Web 頁(yè)面的時(shí)間點(diǎn)到FP的時(shí)間點(diǎn)這段時(shí)間可以被視為白屏?xí)r間，即用戶看到的都是沒有任何內(nèi)容的白色屏幕。FP 指標(biāo)反映了頁(yè)面的白屏?xí)r間，白屏?xí)r間的長(zhǎng)短直接影響了用戶的體驗(yàn)和滿意度。

首次繪制與其他性能指標(biāo)如 First Contentful Paint (FCP) 和 Largest Contentful Paint (LCP) 相關(guān)但有所不同：

• FCP（首次內(nèi)容繪制）：指的是頁(yè)面首次繪制文本或圖像的時(shí)間點(diǎn)，通常在 FP 之后發(fā)生，因?yàn)樗婕暗礁唧w的頁(yè)面內(nèi)容。
• LCP（最大內(nèi)容繪制）：指的是頁(yè)面上最大的文本塊或圖像元素完成繪制的時(shí)間點(diǎn)，它關(guān)注的是頁(yè)面主要內(nèi)容的可見性。

圖片

SI：速度指數(shù)

SI 全稱為 Speed Index，即速度指數(shù)，用于衡量頁(yè)面渲染用戶可見內(nèi)容迅速程度。Speed Index 并不是一個(gè)具體的時(shí)間點(diǎn)，而是一個(gè)綜合性指標(biāo)。它表示頁(yè)面從加載開始到頁(yè)面內(nèi)容基本可見的過程中，用戶感受到的加載速度。該指標(biāo)是基于視頻捕獲的可視進(jìn)度或從繪制事件的可視進(jìn)展來(lái)計(jì)算。

圖片

一般來(lái)說，在移動(dòng)設(shè)備上，Speed Index 低于 3.4s，在桌面上低于 1.3s 時(shí)，Lighthouse 才能獲得 90 以上的評(píng)分。

交互相關(guān)

CLS：累積布局偏移

CLS 全稱為 Cumulative Layout Shift，即累積布局偏移，用于衡量一個(gè)頁(yè)面在加載過程中，由于內(nèi)容的加載和渲染，導(dǎo)致頁(yè)面布局發(fā)生多次變化的情況。具體來(lái)說，CLS 指標(biāo)衡量的是頁(yè)面中可見元素在加載過程中由于內(nèi)容加載而發(fā)生的位置偏移。這些元素可能因?yàn)閳D片、廣告、視頻等資源的加載而發(fā)生移動(dòng)。如果一個(gè)頁(yè)面的元素在加載過程中頻繁移動(dòng)，那么這個(gè)頁(yè)面的 CLS 值就會(huì)比較高，這通常不是一個(gè)好的用戶體驗(yàn)。

注意：只有意外的布局變化才會(huì)計(jì)入 CLS 分?jǐn)?shù)。如果內(nèi)容在用戶交互（例如點(diǎn)擊）后移動(dòng)，則不會(huì)增加 CLS。

在 Chrome DevTools 的 Lighthouse 面板中可以測(cè)量 CLS 得分：

圖片

CLS 的值范圍通常是從 0 到 1，其中 0 表示沒有布局偏移，1 表示布局偏移非常嚴(yán)重。一個(gè)較低的 CLS 值意味著頁(yè)面在加載過程中布局穩(wěn)定，用戶可以更流暢地瀏覽頁(yè)面。

理想的 CLS 時(shí)間應(yīng)控制在 0.1 之內(nèi)：

圖片

CLS 分?jǐn)?shù)是通過將影響分?jǐn)?shù)與距離分?jǐn)?shù)相乘來(lái)計(jì)算的，其中：

• 影響分?jǐn)?shù)：視口中會(huì)移動(dòng)的不穩(wěn)定元素的總面積占比。如果頁(yè)面加載過程中有覆蓋視口 60% 面積的元素移動(dòng)了，那么影響分?jǐn)?shù)就是 0.6。
• 距離分?jǐn)?shù)：視口中任何單一元素移動(dòng)的最大距離與視口高度的比值。假設(shè)一個(gè)元素從位置（0, 100）移動(dòng)到（0, 500），這導(dǎo)致了 400px 的垂直偏移。如果視口的高度是 1000px，那么距離分?jǐn)?shù)就是 400px / 1000px = 0.4。

則累積布局偏移分?jǐn)?shù)是 0.6 x 0.4 = 0.375。

影響 CLS 分?jǐn)?shù)的常見的原因主要有：

• 圖片、視頻和 iframe 沒有預(yù)先設(shè)定尺寸，導(dǎo)致頁(yè)面加載時(shí)元素位置變化。
• 字體加載過程中可能產(chǎn)生文本短暫消失或樣式未加載的文本閃爍，影響布局穩(wěn)定性。
• 動(dòng)態(tài)內(nèi)容（如廣告、通知等）注入 DOM 后，尤其是網(wǎng)絡(luò)請(qǐng)求之后，往往會(huì)導(dǎo)致頁(yè)面布局發(fā)生突變。

CLS 是由于布局中的意外變化而發(fā)生的，因此在編寫 HTML 和 CSS 時(shí)，可以考慮以下原則：

• 避免布局重疊：不要將新元素插入到現(xiàn)有元素之上，因?yàn)檫@可能導(dǎo)致頁(yè)面布局發(fā)生意外的變化。尤其是當(dāng)插入通知或警告框時(shí)，應(yīng)該考慮使用不會(huì)干擾其他頁(yè)面元素的設(shè)計(jì)方法。
• 預(yù)留空間：為圖像和視頻元素指定尺寸屬性，以便瀏覽器在內(nèi)容加載之前就能為它們預(yù)留出正確的空間。這有助于防止頁(yè)面在加載過程中發(fā)生不必要的布局調(diào)整。
• 謹(jǐn)慎使用動(dòng)畫：動(dòng)畫和過渡效果可以提升用戶體驗(yàn)，但應(yīng)確保它們不會(huì)導(dǎo)致頁(yè)面布局發(fā)生不必要的改變。選擇那些不會(huì)移動(dòng)元素或改變布局尺寸的過渡效果，以保持頁(yè)面的穩(wěn)定性和一致性。

INP：交互到下一次繪制

INP 全稱為 Interaction to Next Paint，即交互到下一次繪制，用來(lái)衡量用戶與網(wǎng)頁(yè)交互后，瀏覽器完成下一次屏幕繪制所需的時(shí)間。這個(gè)指標(biāo)主要關(guān)注的是用戶交互（如點(diǎn)擊、觸摸、鍵盤輸入等）之后，頁(yè)面響應(yīng)并渲染新內(nèi)容的速度。

INP 會(huì)測(cè)量以下延遲：

• 輸入延遲：用戶交互和瀏覽器能夠處理事件之間的時(shí)間，類似于 FID。
• 處理延遲：瀏覽器處理事件處理程序所需的時(shí)間
• 顯示延遲：瀏覽器重新計(jì)算布局并將像素繪制到屏幕上所需的時(shí)間。

圖片

理想的 INP 時(shí)間應(yīng)控制在 200 毫秒之內(nèi)：

圖片

對(duì)于 INP，只觀測(cè)以下互動(dòng)類型：

• 使用鼠標(biāo)點(diǎn)擊。
• 點(diǎn)按帶有觸摸屏的設(shè)備。
• 實(shí)體鍵盤或屏幕鍵盤鍵。

FID：首次輸入延遲

FID 全稱為 First Input Delay，即首次輸入延遲，是衡量網(wǎng)頁(yè)性能的一個(gè)重要指標(biāo)，它反映了用戶在頁(yè)面加載過程中首次與頁(yè)面交互時(shí)的體驗(yàn)。FID 特別關(guān)注用戶首次點(diǎn)擊按鈕、鏈接、輸入字段等可交互元素時(shí)，頁(yè)面響應(yīng)這些交互所需的時(shí)間。

FID 僅測(cè)量輸入延遲，即用戶輸入和瀏覽器開始執(zhí)行事件處理程序之間的時(shí)間。

圖片

INP 是 FID 的繼任指標(biāo)。雖然兩者都是響應(yīng)能力指標(biāo)，但 FID 僅測(cè)量了頁(yè)面上首次互動(dòng)的輸入延遲，而 INP 則通過考慮所有頁(yè)面互動(dòng)（從輸入延遲到運(yùn)行事件處理程序所需的時(shí)間，再到瀏覽器繪制下一幀）來(lái)改進(jìn)FID。這使得 INP 成為更可靠的整體響應(yīng)能力指標(biāo)。

TTI：可交互時(shí)間

TTI 全稱為 Time To Interactive，即可交互時(shí)間，用于評(píng)估頁(yè)面從開始加載到用戶可以順暢地與之交互的時(shí)間點(diǎn)。TTI 特別關(guān)注頁(yè)面的響應(yīng)性和交互性，它試圖捕捉用戶能夠開始與頁(yè)面進(jìn)行流暢交互的瞬間。

TTI 時(shí)間主要取決于以下因素：

• 頁(yè)面布局穩(wěn)定，所有可見的內(nèi)容都已經(jīng)被加載。
• 主線程空閑。如果還在加載腳本或處理其他任務(wù)，那么應(yīng)用將不會(huì)處于交互狀態(tài)。用戶的點(diǎn)擊和其他操作將被忽略（或排隊(duì)）直到線程空閑。

可以通過減少腳本的加載時(shí)間來(lái)降低 TTI 時(shí)間，因?yàn)槟_本的加載和處理往往是造成高 TTI 的元兇。以下是一些優(yōu)化策略：

• 清除冗余腳本：移除所有未使用的腳本，避免瀏覽器花費(fèi)時(shí)間去解析不必要的代碼，從而提升頁(yè)面加載速度。
• 分割腳本文件：將大型腳本拆分成多個(gè)較小的文件。這有助于瀏覽器更有效地加載和解析這些腳本，減少阻塞時(shí)間。
• 動(dòng)態(tài)加載腳本：對(duì)于來(lái)自外部資源且無(wú)法直接分割或修改的腳本，考慮采用動(dòng)態(tài)加載的方式，以減少對(duì)頁(yè)面初始加載時(shí)間的影響。

Core Web Vitals

Core Web Vitals 是一組由Google推出的關(guān)鍵用戶體驗(yàn)指標(biāo)，旨在幫助開發(fā)人員評(píng)估和優(yōu)化網(wǎng)站的性能。這些指標(biāo)主要關(guān)注三個(gè)方面：加載性能、交互性能和視覺穩(wěn)定性。

Core Web Vitals 包含了三個(gè)指標(biāo)：

• INP（Interaction to Next Paint）：用于評(píng)估頁(yè)面交互的性能，它衡量的是從用戶與頁(yè)面進(jìn)行交互（如點(diǎn)擊、觸摸等）到頁(yè)面下一次繪制（Paint）之間的時(shí)間。
• LCP（Largest Contentful Paint）：用于評(píng)估頁(yè)面加載的性能，它衡量的是頁(yè)面加載的最大內(nèi)容元素（如文本塊或圖片）出現(xiàn)在屏幕上的時(shí)間。
• CLS（Cumulative Layout Shift）：用于評(píng)估頁(yè)面視覺穩(wěn)定性，它衡量的是頁(yè)面在加載過程中由于內(nèi)容布局變化而發(fā)生的意外移動(dòng)。

圖片

性能測(cè)量工具

可以借助 Gooogle 開源的 web-vitals 庫(kù)來(lái)測(cè)量一些性能指標(biāo)：

import {onCLS, onINP, onLCP, onFCP, onFID, onTTFB} from 'web-vitals';

onCLS(console.log);
onINP(console.log);
onLCP(console.log);
onFCP(console.log);
onFID(console.log);
onTTFB(console.log);

使用 Google 提供免費(fèi)的 PageSpeed Insights (PSI) 工具來(lái)測(cè)試網(wǎng)站的性能：

圖片

使用 Chrome Devtools 的 Lighthouse 選項(xiàng)卡測(cè)試性能指標(biāo)：

圖片

注意，在 Lighthouse 中，不同指標(biāo)在總分?jǐn)?shù)中的占比是不同的：

圖片