前端是如何監控效能的？

王铁柱6發表於2024-12-11
前端

前端效能監控涵蓋了多方面，從使用者感知的載入速度到頁面互動的流暢度，再到資源載入的效率等等。以下是一些常用的前端效能監控方法和工具：

1. 基於瀏覽器的效能 API:

  • Navigation Timing API: 提供頁面載入各個階段的精確時間戳，例如 DNS 解析時間、TCP 連線時間、資源載入時間等。 可以透過 performance.timing 物件訪問這些資料。
  • Resource Timing API: 提供頁面載入各個資源的詳細計時資訊，例如每個圖片、指令碼、樣式表等的載入時間。可以透過 performance.getEntriesByType('resource') 獲取這些資料.
  • PerformanceObserver API: 這是一個更強大的 API，可以監聽各種效能指標，例如 paint、longtask、largest-contentful-paint 等，提供更細粒度的效能資料。
  • High Resolution Time API: 提供高精度時間戳，可以更精確地測量程式碼執行時間等。performance.now() 方法返回一個高精度時間戳。

2. 使用者自定義指標:

  • 手動打點: 在程式碼的關鍵位置手動記錄時間戳，計算時間差來衡量特定程式碼塊的執行時間。
  • 自定義事件: 透過監聽自定義事件，可以追蹤使用者行為和頁面互動的效能。

3. 開發者工具:

  • Chrome DevTools Performance 皮膚: 提供瀑布流圖、火焰圖等視覺化工具，可以直觀地分析頁面載入過程和效能瓶頸。 Lighthouse 也整合在 DevTools 中，可以對網站效能進行全面的評估。
  • Firefox Profiler: 類似於 Chrome DevTools Performance 皮膚，提供效能分析工具。

4. 第三方效能監控平臺:

  • Google Analytics: 可以追蹤頁面瀏覽量、跳出率等指標，以及頁面載入時間等效能資料。
  • New Relic: 提供全面的應用效能監控（APM）服務，包括前端效能監控、後端效能監控等。
  • Dynatrace: 類似於 New Relic，提供全面的 APM 服務。
  • Sentry: 主要用於錯誤追蹤，但也提供一些效能監控功能。
  • SpeedCurve: 專注於前端效能監控，提供詳細的效能資料和分析報告。

5. 其他指標和方法:

  • First Contentful Paint (FCP): 首次繪製任何文字、影像、非空白 canvas 或 SVG 的時間。
  • Largest Contentful Paint (LCP): 視口中最大的內容元素渲染的時間。
  • First Input Delay (FID): 從使用者第一次與頁面互動（例如點選連結、點選按鈕）到瀏覽器實際能夠開始處理事件處理程式的時間。
  • Time to Interactive (TTI): 頁面變得完全可互動的時間。
  • Total Blocking Time (TBT): FCP 和 TTI 之間所有長任務的阻塞時間總和。
  • Cumulative Layout Shift (CLS): 衡量頁面佈局的穩定性。

具體實施步驟 (示例):

// 使用 PerformanceObserver 監聽 LCP
const observer = new PerformanceObserver((list) => {
  const entries = list.getEntries();
  const lastEntry = entries[entries.length - 1];
  console.log('LCP:', lastEntry.renderTime);
});

observer.observe({ type: 'largest-contentful-paint', buffered: true });

// 使用 Navigation Timing API 獲取頁面載入時間
window.onload = () => {
  const timing = performance.timing;
  const loadTime = timing.loadEventEnd - timing.navigationStart;
  console.log('Page Load Time:', loadTime);
};

總結:

前端效能監控是一個持續的過程，需要結合多種方法和工具，才能全面瞭解網站的效能狀況並進行最佳化。 選擇合適的工具和指標取決於你的具體需求和目標。 記住，最終目標是提升使用者體驗。

相關文章