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

加載相關(guān)

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

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

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

圖片

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

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

圖片

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

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

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

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

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

圖片

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

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

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

圖片

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

圖片

TTFB：首字節(jié)時間

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

在下圖中，TTFB 測量的是 startTime 和 responseStart 之間的時間總和：

圖片

這個時間段包括：

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

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

圖片

TBT：總阻塞時間

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

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

圖片

減少 TBT 時間的方式包括：

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

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

FMP：首次有效渲染

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

FMP 的計算比較復(fù)雜，因為它涉及到“有意義”內(nèi)容的定義。在實際應(yīng)用中，通常需要根據(jù)具體的應(yīng)用場景和用戶需求來確定哪些內(nèi)容被認(rèn)為是“有意義”的。

圖片

FP：首次繪制

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

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

• FCP（首次內(nèi)容繪制）：指的是頁面首次繪制文本或圖像的時間點，通常在 FP 之后發(fā)生，因為它涉及到更具體的頁面內(nèi)容。
• LCP（最大內(nèi)容繪制）：指的是頁面上最大的文本塊或圖像元素完成繪制的時間點，它關(guān)注的是頁面主要內(nèi)容的可見性。

圖片

SI：速度指數(shù)

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

圖片

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

交互相關(guān)

CLS：累積布局偏移

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

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

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

圖片

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

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

圖片

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

• 影響分?jǐn)?shù)：視口中會移動的不穩(wěn)定元素的總面積占比。如果頁面加載過程中有覆蓋視口 60% 面積的元素移動了，那么影響分?jǐn)?shù)就是 0.6。
• 距離分?jǐn)?shù)：視口中任何單一元素移動的最大距離與視口高度的比值。假設(shè)一個元素從位置（0, 100）移動到（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)致頁面加載時元素位置變化。
• 字體加載過程中可能產(chǎn)生文本短暫消失或樣式未加載的文本閃爍，影響布局穩(wěn)定性。
• 動態(tài)內(nèi)容（如廣告、通知等）注入 DOM 后，尤其是網(wǎng)絡(luò)請求之后，往往會導(dǎo)致頁面布局發(fā)生突變。

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

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

INP：交互到下一次繪制

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

INP 會測量以下延遲：

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

圖片

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

圖片

對于 INP，只觀測以下互動類型：

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

FID：首次輸入延遲

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

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

圖片

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

TTI：可交互時間

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

TTI 時間主要取決于以下因素：

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

可以通過減少腳本的加載時間來降低 TTI 時間，因為腳本的加載和處理往往是造成高 TTI 的元兇。以下是一些優(yōu)化策略：

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

Core Web Vitals

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

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

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

圖片

性能測量工具

可以借助 Gooogle 開源的 web-vitals 庫來測量一些性能指標(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 提供免費的 PageSpeed Insights (PSI) 工具來測試網(wǎng)站的性能：

圖片

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

圖片

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

圖片