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 應用的加載速度和用戶體驗。
該文章在 2024/9/14 11:03:12 編輯過
400 186 1886
