指標(biāo)含義與優(yōu)化

1. FID（First Input Delay）：首次輸入延遲時間，用于衡量網(wǎng)站互動順暢程度。它記錄了用戶首次與頁面交互（如點擊按鈕、輸入文本等）到瀏覽器實際處理該交互之間的時間差。屬于可交互時間指標(biāo)。

• 監(jiān)控方法：可以通過在前端代碼中設(shè)置事件監(jiān)聽器來記錄用戶的首次輸入時間，并與瀏覽器實際處理該輸入的時間進行比較。
• 優(yōu)化建議：

減少主線程上的阻塞操作，確保瀏覽器能夠及時響應(yīng)用戶的輸入。

使用Web Workers等技術(shù)將計算密集型任務(wù)移至后臺線程執(zhí)行。

計算方式：

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log('fid', entry.processingStart - entry.startTime);
  }
});


observer.observe({type: 'first-input', buffer: true});

2. FCP（First Contentful Paint）：首次內(nèi)容繪制，記錄頁面首次繪制文本、圖片、非空白Canvas或SVG的時間。屬于加載性能指標(biāo)。

• 監(jiān)控方法：可以使用瀏覽器的Performance API或第三方性能監(jiān)控工具來記錄FCP時間。
• 優(yōu)化建議：

優(yōu)化服務(wù)器響應(yīng)速度，減少頁面加載時間。

使用CDN等技術(shù)加速靜態(tài)資源的加載。

減少頁面中的非關(guān)鍵資源請求，提高首屏加載速度。

計算方式：

const fcp = performance.getEntriesByType('paint').filter(entry => entry.name == 'first-contentful-paint')[0].startTime;

3. CLS（Cumulative Layout Shift）：累積布局偏移，衡量網(wǎng)頁內(nèi)容在加載過程中發(fā)生的意外布局偏移的頻率和程度。屬于穩(wěn)定性指標(biāo)。

• 監(jiān)控方法：可以使用瀏覽器的Performance API或第三方性能監(jiān)控工具來記錄CLS分?jǐn)?shù)。
• 優(yōu)化建議：

避免在頁面加載過程中動態(tài)改變元素的尺寸或位置。

使用CSS的width和height屬性為元素設(shè)置固定的尺寸。

使用position: fixed或position: sticky來固定元素的位置。

計算方式：

import {getCLS} from 'web-vitals';


getCLS(console.log);

4. LCP（Largest Contentful Paint）：最大內(nèi)容繪制，用于測量頁面主要內(nèi)容加載完成的時間。

• 監(jiān)控方法：可以使用瀏覽器的Performance API或第三方性能監(jiān)控工具來記錄LCP時間。
• 優(yōu)化建議：

• 優(yōu)先加載和渲染頁面的主要內(nèi)容。
• 使用懶加載技術(shù)延遲加載非關(guān)鍵內(nèi)容。
• 優(yōu)化圖片和視頻的加載策略，如使用適當(dāng)?shù)母袷?、尺寸和壓縮技術(shù)。

計算：

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    console.log('LCP candidate:', entry.startTime, entry);
  }
}).observe({type: 'largest-contentful-paint', buffered: true});

為了監(jiān)控這些指標(biāo)并進行性能優(yōu)化，你可以考慮使用以下工具和方法：

• 瀏覽器開發(fā)者工具：大多數(shù)現(xiàn)代瀏覽器都內(nèi)置了開發(fā)者工具，你可以使用其中的Performance面板來監(jiān)控和分析頁面的性能。
• 第三方性能監(jiān)控工具：有許多第三方工具可以幫助你監(jiān)控和優(yōu)化前端性能，如Google Analytics、New Relic、DataDog等。這些工具通常提供了豐富的功能和報告，可以幫助你快速發(fā)現(xiàn)和解決問題。
• 前端性能監(jiān)控庫：如Lighthouse、PerformanceObserver等庫可以幫助你收集和分析前端性能數(shù)據(jù)。這些庫通常與瀏覽器API緊密結(jié)合，提供了更深入的性能分析功能。

在優(yōu)化前端性能時，還需要注意以下幾點：

• 減少HTTP請求：通過合并文件、使用雪碧圖等技術(shù)減少HTTP請求的數(shù)量。
• 壓縮和優(yōu)化資源：對CSS、JavaScript和圖片等資源進行壓縮和優(yōu)化，減少文件大小并加速加載速度。
• 利用緩存：合理使用瀏覽器緩存和CDN等技術(shù)減少不必要的網(wǎng)絡(luò)請求和數(shù)據(jù)傳輸。
• 避免阻塞渲染：將非關(guān)鍵腳本設(shè)置為異步加載或延遲加載以避免阻塞頁面渲染。
• 優(yōu)化DOM操作：減少不必要的DOM操作并避免在循環(huán)中進行DOM操作以提高頁面性能。

其他指標(biāo)

除了之前提到的FID、FCP、CLS和LCP等性能監(jiān)控指標(biāo)外，還有其他一些與前端性能相關(guān)的關(guān)鍵指標(biāo)。以下是其中一些重要的指標(biāo)：

1. Time to First Byte (TTFB)：首字節(jié)時間，它表示瀏覽器從發(fā)起請求到接收到服務(wù)器響應(yīng)的第一個字節(jié)所花費的時間。這個指標(biāo)主要反映了服務(wù)器的響應(yīng)速度和網(wǎng)絡(luò)延遲。
2. Time to Interactive (TTI)：可交互時間，指頁面完全加載并且用戶可以進行交互的時間點。這個時間點通常是在所有關(guān)鍵資源和腳本都加載并執(zhí)行完畢后。
3. Total Blocking Time (TBT)：總阻塞時間，這是FID的一個補充指標(biāo)，用于測量用戶在一段時間內(nèi)經(jīng)歷的連續(xù)阻塞的總時間。這可以幫助識別可能導(dǎo)致頁面響應(yīng)性差的長時間阻塞。
4. DOMContentLoaded Event：當(dāng)HTML文檔被完全加載和解析完成之后，DOMContentLoaded事件被觸發(fā)，無需等待樣式表、圖像和子框架的完成加載。
5. Load Event：當(dāng)整個頁面及所有依賴資源如樣式表和圖片都已完成加載時，load事件才會被觸發(fā)。
6. Page Size：頁面大小，這是組成頁面的所有資源（HTML、CSS、JavaScript、圖片等）的總大小。較大的頁面大小可能導(dǎo)致加載時間延長。
7. Requests：請求數(shù)量，指從網(wǎng)站下載資源時所有網(wǎng)絡(luò)請求的總數(shù)。過多的請求可能會增加頁面加載時間。
8. Resource Loading Times：資源加載時間，指頁面中各種資源（如CSS、JavaScript、圖像等）的加載時間。
9. JavaScript Execution Time：JavaScript執(zhí)行時間，指頁面中JavaScript代碼執(zhí)行所需的時間。
10. Page Availability：頁面可用性，指頁面在各種設(shè)備和網(wǎng)絡(luò)環(huán)境下的可用性。
11. Error Monitoring：錯誤監(jiān)控，指監(jiān)控頁面中的JavaScript錯誤、資源加載錯誤等。這有助于及時發(fā)現(xiàn)和修復(fù)潛在的性能問題。

為了監(jiān)控和優(yōu)化這些性能指標(biāo)，你可以使用瀏覽器的開發(fā)者工具、第三方性能監(jiān)控工具或前端性能監(jiān)控庫。這些工具可以幫助你收集和分析性能數(shù)據(jù)，識別性能瓶頸，并提供優(yōu)化建議。在優(yōu)化前端性能時，需要注意減少HTTP請求、壓縮和優(yōu)化資源、利用緩存、避免阻塞渲染、優(yōu)化DOM操作等策略。