1. 什麼是 Performance API
1.1 簡介
Performance API 提供了一種通路和測量浏覽器性能相關資訊的方法。通過Performance API，開發者可以獲得頁面加載時間、資源加載性能、使用者互動延遲等詳細資訊，用于性能分析和優化。
1.2 用例
Performance API旨在幫助開發者定位和解決性能問題，優化頁面加載速度和使用者體驗。它可以在以下場景中使用：
- 網頁性能監控
測量分析頁面加載時間、資源加載性能、關鍵渲染路徑等名額，了解網頁性能瓶頸。
- 性能優化
識别潛在的性能問題并采取相應的優化措施，以提高網頁加載速度和響應性能。
- 使用者體驗分析
通過測量使用者互動延遲和動畫性能來評估網頁的使用者體驗品質。
- 性能基準
比較不同版本或不同配置之間的性能差異，以評估性能提升效果。
2. 如何使用性能API
Performance API 提供了一組用于擷取和測量性能相關資訊的方法和屬性。以下是一些常見的用法示例：
- 擷取頁面加載時間
const loadTime =
window.performance.timing.loadEventEnd -
window.performance.timing.navigationStart;
console.log(`Page load time: ${loadTime}ms`); - 測量資源加載時間
const resourceTiming = window.performance.getEntriesByType("resource");
resourceTiming.forEach((resource) => {
console.log(`${resource.name} load time: ${resource.duration}ms`);
}); - 監控使用者互動延遲
const interactionStart = Date.now();
document.addEventListener("click", () => {
const interactionEnd = Date.now();
const interactionDelay = interactionEnd - interactionStart;
console.log(`User click delay:${interactionDelay}ms`);
}); 請注意，這些代碼僅為示例，實際使用可能需要根據具體要求和浏覽器相容性進行适當處理和相容性測試。
3. 性能 API 示例
Performance API可以應用于很多場景和優化方案，這裡舉幾個常見的例子：
3.1 頁面加載時間監控和優化
使用 Performance API，我們可以監控頁面加載時間并對其進行優化。以下是監控頁面加載時間和資源加載時間的示例代碼：
// Monitoring page load time
const loadTime =
window.performance.timing.loadEventEnd -
window.performance.timing.navigationStart;
console.log(`Page load time: ${loadTime}ms`);
// Monitor resource load time
const resourceTiming = window.performance.getEntriesByType("resource");
resourceTiming.forEach((resource) => {
console.log(`${resource.name} load time: ${resource.duration}ms`);
}); 通過擷取對象中的時間戳window.performance.timing，我們可以計算出頁面的加載時間。另外，通過使用window.performance.getEntriesByType('resource')方法，我們可以獲得所有資源的加載性能資訊，進一步優化資源加載。
3.2 資源加載性能分析
對于網頁中的關鍵資源，我們通常需要關注其加載時間以進行性能優化。通過Performance API，我們可以監控和分析關鍵資源的加載性能。下面是監控指定關鍵資源加載時間的示例代碼：
// Monitor the load time of a critical resource
const keyResources = [
"https://example.com/css/style.css",
"https://example.com/js/main.js",
];
keyResources.forEach((resource) => {
const resourceEntry = window.performance.getEntriesByName(resource)[0];
console.log(`${resource} load time: ${resourceEntry.duration}ms`);
}); 通過使用該window.performance.getEntriesByName()方法，我們可以獲得特定資源的加載性能資訊，進而分析和優化關鍵資源的加載時間。
3.3 使用者互動延遲監控
使用者體驗是 Web 開發中最重要的因素之一，Performance API 可以幫助我們監控使用者與網頁互動的延遲以進行優化。以下是監控使用者點選延遲的示例代碼：
// Monitor user click latency
const interactionStart = Date.now();
document.addEventListener("click", () => {
const interactionEnd = Date.now();
const interactionDelay = interactionEnd - interactionStart;
console.log(`User click delay: ${interactionDelay}ms`);
}); 通過記錄使用者互動的開始時間和結束時間，我們可以計算出使用者點選的延遲時間，幫助我們評估和提升使用者體驗。
3.4 頁面動畫性能監控
在網頁中使用動畫可以增強使用者體驗，但不合理的動畫實作可能會導緻性能問題。通過 Performance API，我們可以監控頁面動畫的性能，以便我們對其進行優化。以下是監控動畫執行時間的示例代碼：
// Monitoring animation performance
function measureAnimationPerformance() {
const animationStart = performance.now();
// Execute animation operations
requestAnimationFrame(() => {
const animationEnd = performance.now();
const animationDuration = animationEnd - animationStart;
console.log(`Animation execution time: ${animationDuration}ms`);
});
}
measureAnimationPerformance(); 在這個例子中，我們使用performance.now()方法擷取動畫的開始時間和結束時間，并計算動畫的執行時間。通過對動畫性能的監控，我們可以判斷動畫是否流暢，是否占用過多資源，進而進行優化和改進。
4.相容性及優缺點
4.1 相容性
以下是Performance API在不同浏覽器上的相容性：
- 鉻 6+ ✅
- 火狐 7+ ✅
- 野生動物園 8+ ✅
- 邊緣 12+ ✅
- Internet Explorer：部分支援，支援 IE 9+
建議在實際開發中根據目标使用者的浏覽器使用情況進行相容性測試，并根據需要提供替代方案或使用polyfill填補相容性差異。
有關詳細的相容性資訊，請通路我可以使用嗎。
4.2 優缺點
性能 API 具有以下優點和缺點：
優點：
- 提供一組豐富的性能名額和測量來全面評估網頁的性能。
- 支援通路頁面加載時間、資源加載性能、使用者互動延遲等關鍵名額，幫助開發者定位和解決性能問題。
- 啟用性能優化和使用者體驗分析，以提高網頁的加載速度和響應能力。
缺點：
- 在某些情況下，擷取性能名額可能會對網頁性能産生一定的影響，需要謹慎使用。
- 某些較舊的浏覽器版本可能不支援，需要相容性處理或替代解決方案。
- 一些名額的準确性可能會受到浏覽器實作和裝置性能的限制，需要綜合考慮和驗證。
使用時，需要結合實際需要和相容性要求合理使用和處理。
4.3 工具推薦
推薦幾個基于 Performance API wrapper 的第三方庫：
- Web Vitals：6.1K ⭐
用于測量和監控核心 Web 性能名額的庫，基于 Performance API，包括 Largest Contentful Paint (LCP)、First Input Delay (FID)、Cumulative Layout Shift (CLS) 和其他名額。
- Perfume.js：2.8K ⭐
一個小巧但功能強大的性能名額庫，用于監控頁面加載時間、關鍵資源加載時間和使用者互動延遲。
- PerformanceNow.js：100⭐
一個小型性能計時庫，可根據性能 API 的高分辨率時間戳提供更準确的性能測量。
這些庫在 Performance API 之上進行包裝和擴充，以提供更友善的接口和功能，幫助開發人員更好地監控和優化 Web 性能。我們可以根據具體需求選擇合适的庫來簡化性能監控和分析。
5. 使用建議和注意事項
總結了使用 Performance API 的一些建議和注意事項：
- 在衡量性能時，您應該選擇合适的時間和目标，以避免對頁面性能造成額外負擔。
- 注意相容性問題，根據目标浏覽器測試和處理相容性，考慮使用polyfill或替代方案。
- 結合其他工具和方法，如浏覽器開發者工具、性能分析工具等，綜合分析和優化網頁性能。
- 了解不同名額的含義和解釋，以避免誤解或曲解績效資料。
- 使用性能資料進行有針對性的優化，優先考慮影響使用者體驗的瓶頸。
- 随着浏覽器的更新和标準的發展，關注 Performance API 的最新變化和增強。
6. 總結
Performance API 是一個關鍵的 JavaScript API，用于通路和測量與浏覽器性能相關的資訊。它提供了豐富的性能名額和度量，幫助開發者定位和解決性能問題，優化頁面加載速度和使用者體驗。
通過Performance API，可以獲得頁面加載時間、資源加載性能、使用者互動延遲等關鍵名額，進行性能分析和優化。