前端監控各指標含義 ？怎么監控怎么優化
作者：cqhly
為了監控和優化這些性能指標，你可以使用瀏覽器的開發者工具、第三方性能監控工具或前端性能監控庫。這些工具可以幫助你收集和分析性能數據，識別性能瓶頸，并提供優化建議。
指標含義與優化
- FID（First Input Delay）：首次輸入延遲時間，用于衡量網站互動順暢程度。它記錄了用戶首次與頁面交互（如點擊按鈕、輸入文本等）到瀏覽器實際處理該交互之間的時間差。屬于可交互時間指標。
- 監控方法：可以通過在前端代碼中設置事件監聽器來記錄用戶的首次輸入時間，并與瀏覽器實際處理該輸入的時間進行比較。
- 優化建議：
減少主線程上的阻塞操作，確保瀏覽器能夠及時響應用戶的輸入。
使用Web Workers等技術將計算密集型任務移至后臺線程執行。
計算方式：
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});- FCP（First Contentful Paint）：首次內容繪制，記錄頁面首次繪制文本、圖片、非空白Canvas或SVG的時間。屬于加載性能指標。
- 監控方法：可以使用瀏覽器的Performance API或第三方性能監控工具來記錄FCP時間。
- 優化建議：
優化服務器響應速度，減少頁面加載時間。
使用CDN等技術加速靜態資源的加載。
減少頁面中的非關鍵資源請求，提高首屏加載速度。
計算方式：
const fcp = performance.getEntriesByType('paint').filter(entry => entry.name == 'first-contentful-paint')[0].startTime;- CLS（Cumulative Layout Shift）：累積布局偏移，衡量網頁內容在加載過程中發生的意外布局偏移的頻率和程度。屬于穩定性指標。
- 監控方法：可以使用瀏覽器的Performance API或第三方性能監控工具來記錄CLS分數。
- 優化建議：
避免在頁面加載過程中動態改變元素的尺寸或位置。
使用CSS的width和height屬性為元素設置固定的尺寸。
使用position: fixed或position: sticky來固定元素的位置。
計算方式：
import {getCLS} from 'web-vitals';
getCLS(console.log);- LCP（Largest Contentful Paint）：最大內容繪制，用于測量頁面主要內容加載完成的時間。
- 監控方法：可以使用瀏覽器的Performance API或第三方性能監控工具來記錄LCP時間。
- 優化建議：
優先加載和渲染頁面的主要內容。
使用懶加載技術延遲加載非關鍵內容。
優化圖片和視頻的加載策略，如使用適當的格式、尺寸和壓縮技術。
計算：
new PerformanceObserver((entryList) => {
for (const entry of entryList.getEntries()) {
console.log('LCP candidate:', entry.startTime, entry);
}
}).observe({type: 'largest-contentful-paint', buffered: true});為了監控這些指標并進行性能優化，你可以考慮使用以下工具和方法：
- 瀏覽器開發者工具：大多數現代瀏覽器都內置了開發者工具，你可以使用其中的Performance面板來監控和分析頁面的性能。
- 第三方性能監控工具：有許多第三方工具可以幫助你監控和優化前端性能，如Google Analytics、New Relic、DataDog等。這些工具通常提供了豐富的功能和報告，可以幫助你快速發現和解決問題。
- 前端性能監控庫：如Lighthouse、PerformanceObserver等庫可以幫助你收集和分析前端性能數據。這些庫通常與瀏覽器API緊密結合，提供了更深入的性能分析功能。
在優化前端性能時，還需要注意以下幾點：
- 減少HTTP請求：通過合并文件、使用雪碧圖等技術減少HTTP請求的數量。
- 壓縮和優化資源：對CSS、JavaScript和圖片等資源進行壓縮和優化，減少文件大小并加速加載速度。
- 利用緩存：合理使用瀏覽器緩存和CDN等技術減少不必要的網絡請求和數據傳輸。
- 避免阻塞渲染：將非關鍵腳本設置為異步加載或延遲加載以避免阻塞頁面渲染。
- 優化DOM操作：減少不必要的DOM操作并避免在循環中進行DOM操作以提高頁面性能。
其他指標
除了之前提到的FID、FCP、CLS和LCP等性能監控指標外，還有其他一些與前端性能相關的關鍵指標。以下是其中一些重要的指標：
- Time to First Byte (TTFB)：首字節時間，它表示瀏覽器從發起請求到接收到服務器響應的第一個字節所花費的時間。這個指標主要反映了服務器的響應速度和網絡延遲。
- Time to Interactive (TTI)：可交互時間，指頁面完全加載并且用戶可以進行交互的時間點。這個時間點通常是在所有關鍵資源和腳本都加載并執行完畢后。
- Total Blocking Time (TBT)：總阻塞時間，這是FID的一個補充指標，用于測量用戶在一段時間內經歷的連續阻塞的總時間。這可以幫助識別可能導致頁面響應性差的長時間阻塞。
- DOMContentLoaded Event：當HTML文檔被完全加載和解析完成之后，DOMContentLoaded事件被觸發，無需等待樣式表、圖像和子框架的完成加載。
- Load Event：當整個頁面及所有依賴資源如樣式表和圖片都已完成加載時，load事件才會被觸發。
- Page Size：頁面大小，這是組成頁面的所有資源（HTML、CSS、JavaScript、圖片等）的總大小。較大的頁面大小可能導致加載時間延長。
- Requests：請求數量，指從網站下載資源時所有網絡請求的總數。過多的請求可能會增加頁面加載時間。
- Resource Loading Times：資源加載時間，指頁面中各種資源（如CSS、JavaScript、圖像等）的加載時間。
- JavaScript Execution Time：JavaScript執行時間，指頁面中JavaScript代碼執行所需的時間。
- Page Availability：頁面可用性，指頁面在各種設備和網絡環境下的可用性。
- Error Monitoring：錯誤監控，指監控頁面中的JavaScript錯誤、資源加載錯誤等。這有助于及時發現和修復潛在的性能問題。
為了監控和優化這些性能指標，你可以使用瀏覽器的開發者工具、第三方性能監控工具或前端性能監控庫。這些工具可以幫助你收集和分析性能數據，識別性能瓶頸，并提供優化建議。在優化前端性能時，需要注意減少HTTP請求、壓縮和優化資源、利用緩存、避免阻塞渲染、優化DOM操作等策略。
責任編輯：武曉燕
來源：
海燕技術棧
