使用 Performance API 實現前端資源監控

chester·chen發表於2024-09-13
ORMAPI前端

1. Performance API 的用處

Performance API 是瀏覽器中內建的一組工具，用於測量和記錄頁面載入和執行過程中的各類效能指標。它的主要用處包括：

  • 監控頁面資源載入：跟蹤頁面中的資源（如 CSS、JavaScript、圖片）的載入時間。
  • 分析頁面載入時間：從導航到頁面完全渲染的所有時間點。
  • 衡量使用者互動效能：測量使用者點選、輸入等操作的響應時間。
  • 最佳化效能瓶頸：透過標記特定的程式碼片段和事件，精準定位效能瓶頸。

這些資料幫助開發者更好地理解頁面表現，進而對效能進行最佳化和改進。

2. Performance API 常用的 API

在使用 Performance API 時，以下幾個 API 是開發者最常用的工具：getEntries()、mark()、以及 PerformanceObserver。這些 API 提供了從獲取效能資料到觀察效能事件的全面能力。

2.1 performance.getEntries()

performance.getEntries() 是 Performance API 提供的一個方法，它返回所有的效能條目（entries）。這些條目記錄了從頁面載入到當前時刻，各類資源的載入和互動的效能資料。效能條目包括頁面載入資源（如 CSS、JS、圖片等）以及自定義的事件標記。

// 獲取頁面中所有資源的效能條目
const entries = performance.getEntries();
console.log(entries);

透過 getEntries()，你可以獲取資源載入時間、開始時間、結束時間等詳細資訊。這對於瞭解頁面中每個資源的載入耗時十分有幫助。

2.2 entries 的型別

getEntries() 返回的每個效能條目物件都屬於以下幾種型別，開發者可以根據需要篩選和分析不同型別的資料：

  • navigation：與頁面導航相關的條目，通常用於分析頁面載入的時間點。
  • resource：所有透過網路請求載入的資源條目，包括 JS、CSS、圖片等。
  • mark：開發者自定義的標記，用於記錄特定事件的開始或結束。
  • measure：透過 performance.measure() 生成的條目，用於測量兩個標記之間的時間間隔。

例如，使用 performance.getEntriesByType('resource') 可以只獲取資源載入的效能資料：

// 獲取所有資源載入的效能條目
const resourceEntries = performance.getEntriesByType('resource');
console.log(resourceEntries);

透過這種方式，開發者可以輕鬆獲取頁面資源的載入時間及其詳情。

2.3 performance.mark()

performance.mark() 是 Performance API 提供的一個方法，允許開發者在程式碼中手動建立標記。這些標記可以用於記錄特定事件的發生時間，從而在分析效能時，更加精確地掌握程式碼中某個關鍵操作的時機。

// 建立自定義標記
performance.mark('start-task');

// 執行某個任務
doSomething();

// 建立結束標記
performance.mark('end-task');

// 測量開始和結束之間的時間
performance.measure('Task Duration', 'start-task', 'end-task');

mark() 非常適合用於衡量應用程式中某段程式碼的執行時間，與 measure() 一起使用可以提供更加詳細的效能分析。

2.4 PerformanceObserver

PerformanceObserver 是 Performance API 的一個高階特性，它可以監聽效能事件的發生，並在事件觸發時執行回撥。這種觀察模式可以幫助開發者實時監控頁面中的資源載入、導航和其他效能相關的事件。

// 建立 PerformanceObserver 例項，監聽資源載入的事件
const observer = new PerformanceObserver((list) => {
  const entries = list.getEntries();
  entries.forEach(entry => {
    console.log(`${entry.name}: ${entry.duration}ms`);
  });
});

// 監聽資源型別的效能條目
observer.observe({ entryTypes: ['resource'] });

透過 PerformanceObserver，你可以監聽特定型別的效能條目，如 resource 或 mark，並實時分析其資料。對於監控資源載入、關鍵操作或使用者互動時的效能表現非常有用。

總結

Performance API 是前端開發者進行效能監控的強大工具，它提供了對頁面載入、資源載入以及使用者互動的詳細分析能力。常用的 API，如 getEntries()、mark()、以及 PerformanceObserver，可以幫助開發者實時獲取和分析效能資料。

透過合理地使用 Performance API，你可以更好地瞭解頁面中各類操作的效能表現，從而有效地最佳化 Web 應用的載入速度和使用者體驗。

相關文章