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

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

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

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

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

計(jì)算方式：

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的時(shí)間。屬于加載性能指標(biāo)。

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

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

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

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

計(jì)算方式：

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來固定元素的位置。

計(jì)算方式：

import {getCLS} from 'web-vitals';


getCLS(console.log);

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

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

優(yōu)先加載和渲染頁面的主要內(nèi)容。

使用懶加載技術(shù)延遲加載非關(guān)鍵內(nèi)容。

優(yōu)化圖片和視頻的加載策略，如使用適當(dāng)?shù)母袷?、尺寸和壓縮技術(shù)。

計(jì)算：

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)并進(jìn)行性能優(yōu)化，你可以考慮使用以下工具和方法：

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

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

• 減少HTTP請求：通過合并文件、使用雪碧圖等技術(shù)減少HTTP請求的數(shù)量。
• 壓縮和優(yōu)化資源：對CSS、JavaScript和圖片等資源進(jìn)行壓縮和優(yōu)化，減少文件大小并加速加載速度。
• 利用緩存：合理使用瀏覽器緩存和CDN等技術(shù)減少不必要的網(wǎng)絡(luò)請求和數(shù)據(jù)傳輸。
• 避免阻塞渲染：將非關(guān)鍵腳本設(shè)置為異步加載或延遲加載以避免阻塞頁面渲染。
• 優(yōu)化DOM操作：減少不必要的DOM操作并避免在循環(huán)中進(jì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é)時(shí)間，它表示瀏覽器從發(fā)起請求到接收到服務(wù)器響應(yīng)的第一個(gè)字節(jié)所花費(fèi)的時(shí)間。這個(gè)指標(biāo)主要反映了服務(wù)器的響應(yīng)速度和網(wǎng)絡(luò)延遲。
2. Time to Interactive (TTI)：可交互時(shí)間，指頁面完全加載并且用戶可以進(jìn)行交互的時(shí)間點(diǎn)。這個(gè)時(shí)間點(diǎn)通常是在所有關(guān)鍵資源和腳本都加載并執(zhí)行完畢后。
3. Total Blocking Time (TBT)：總阻塞時(shí)間，這是FID的一個(gè)補(bǔ)充指標(biāo)，用于測量用戶在一段時(shí)間內(nèi)經(jīng)歷的連續(xù)阻塞的總時(shí)間。這可以幫助識別可能導(dǎo)致頁面響應(yīng)性差的長時(shí)間阻塞。
4. DOMContentLoaded Event：當(dāng)HTML文檔被完全加載和解析完成之后，DOMContentLoaded事件被觸發(fā)，無需等待樣式表、圖像和子框架的完成加載。
5. Load Event：當(dāng)整個(gè)頁面及所有依賴資源如樣式表和圖片都已完成加載時(shí)，load事件才會被觸發(fā)。
6. Page Size：頁面大小，這是組成頁面的所有資源（HTML、CSS、JavaScript、圖片等）的總大小。較大的頁面大小可能導(dǎo)致加載時(shí)間延長。
7. Requests：請求數(shù)量，指從網(wǎng)站下載資源時(shí)所有網(wǎng)絡(luò)請求的總數(shù)。過多的請求可能會增加頁面加載時(shí)間。
8. Resource Loading Times：資源加載時(shí)間，指頁面中各種資源（如CSS、JavaScript、圖像等）的加載時(shí)間。
9. JavaScript Execution Time：JavaScript執(zhí)行時(shí)間，指頁面中JavaScript代碼執(zhí)行所需的時(shí)間。
10. Page Availability：頁面可用性，指頁面在各種設(shè)備和網(wǎng)絡(luò)環(huán)境下的可用性。
11. Error Monitoring：錯(cuò)誤監(jiān)控，指監(jiān)控頁面中的JavaScript錯(cuò)誤、資源加載錯(cuò)誤等。這有助于及時(shí)發(fā)現(xiàn)和修復(fù)潛在的性能問題。

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