Performance API簡介
-
Performance API是什么？
衡量和分析各種性能指標(biāo)對于確保 web 應(yīng)用的速度非常重要。Performance API 提供了重要的內(nèi)置指標(biāo)，并能夠?qū)⒛阕约旱臏y量結(jié)果添加到瀏覽器的性能時間線（performance timeline）中。性能時間線使用高精度的時間戳，且可以在開發(fā)者工具中顯示。你還可以將相關(guān)數(shù)據(jù)發(fā)送到用于分析的端點，以根據(jù)時間記錄性能指標(biāo)。
-
Performance API的作用和優(yōu)勢
1. 提供詳細(xì)的性能信息：Performance API不僅提供了頁面加載時間等基本信息，還提供了更詳細(xì)的性能數(shù)據(jù)，如各個階段的開始和結(jié)束時間、資源加載時間、事件處理時間等。這些詳細(xì)信息可以幫助開發(fā)者更準(zhǔn)確地分析和定位性能問題。
2. 支持多種性能指標(biāo)：Performance API支持多種常用的性能指標(biāo)，如頁面加載時間、資源加載時間、重定向次數(shù)、DNS解析耗時等。這些指標(biāo)可以幫助開發(fā)者全面評估網(wǎng)頁的性能，并進(jìn)行有針對性的優(yōu)化。
3. 可以與其他API集成：Performance API可以與其他API集成使用，如Navigation Timing API、Resource Timing API等。通過結(jié)合使用不同的API，開發(fā)者可以獲取更全面和準(zhǔn)確的性能數(shù)據(jù)，并進(jìn)行更深入的分析和優(yōu)化。
4. 提升用戶體驗：通過使用Performance API來優(yōu)化網(wǎng)頁性能，可以提升用戶的體驗。快速加載的網(wǎng)頁可以減少用戶等待時間，流暢的交互性能可以提高用戶的操作體驗，從而增加用戶的滿意度和留存率。
window.performance
performance.timing字段介紹
| navigationStart | 初始化頁面，在同一個瀏覽器上下文中前一個頁面unload的時間戳，如果沒有前一個頁面的unload,則與fetchStart值相等 |
|---|---|
| redirectStart | 第一個HTTP重定向發(fā)生的時間,有跳轉(zhuǎn)且是同域的重定向,否則為0 |
| redirectEnd | 最后一個重定向完成時的時間,否則為0 |
| fetchStart | 瀏覽器準(zhǔn)備好使用http請求獲取文檔的時間,這發(fā)生在檢查緩存之前 |
| domainLookupStart | DNS域名開始查詢的時間,如果有本地的緩存或keep-alive則時間為0 |
| domainLookupEnd | DNS域名結(jié)束查詢的時間 |
| connectStart | TCP開始建立連接的時間,如果是持久連接,則與fetchStart值相等 |
| secureConnectionStart | https 連接開始的時間,如果不是安全連接則為0 |
| connectEnd | TCP完成握手的時間，如果是持久連接則與fetchStart值相等 |
| requestStart | HTTP請求讀取真實文檔開始的時間,包括從本地緩存讀取 |
| requestEnd | HTTP請求讀取真實文檔結(jié)束的時間,包括從本地緩存讀取 |
| responseStart | 返回瀏覽器從服務(wù)器收到（或從本地緩存讀取）第一個字節(jié)時的Unix毫秒時間戳 |
| responseEnd | 返回瀏覽器從服務(wù)器收到（或從本地緩存讀取，或從本地資源讀?。┳詈笠粋€字節(jié)時的Unix毫秒時間戳 |
| unloadEventStart | 前一個頁面的unload的時間戳 如果沒有則為0 |
| unloadEventEnd | 與unloadEventStart相對應(yīng)，返回的是unload函數(shù)執(zhí)行完成的時間戳 |
| domLoading | 返回當(dāng)前網(wǎng)頁DOM結(jié)構(gòu)開始解析時的時間戳,此時document.readyState變成loading,并將拋出readyStateChange事件 |
| domInteractive | 返回當(dāng)前網(wǎng)頁DOM結(jié)構(gòu)結(jié)束解析、開始加載內(nèi)嵌資源時時間戳,document.readyState 變成interactive，并將拋出readyStateChange事件(注意只是DOM樹解析完成,這時候并沒有開始加載網(wǎng)頁內(nèi)的資源) |
| domContentLoadedEventStart | 網(wǎng)頁domContentLoaded事件發(fā)生的時間 |
| domContentLoadedEventEnd | 網(wǎng)頁domContentLoaded事件腳本執(zhí)行完畢的時間,domReady的時間 |
| domComplete | DOM樹解析完成,且資源也準(zhǔn)備就緒的時間,document.readyState變成complete.并將拋出readystatechange事件 |
| loadEventStart | load 事件發(fā)送給文檔，也即load回調(diào)函數(shù)開始執(zhí)行的時間 |
| loadEventEnd | load回調(diào)函數(shù)執(zhí)行完成的時間 |
1. Performance接口`
- 獲取頁面加載時間
- 獲取頁面資源加載時間
使用示例：
`// 獲取頁面加載時間
const loadTime = window.performance.timing.loadEventEnd - window.performance.timing.navigationStart;
console.log('頁面加載時間：', loadTime);
// 獲取資源加載時間
const resources = window.performance.getEntriesByType('resource');
resources.forEach(resource => {
console.log('資源URL:', resource.name);
console.log('資源加載時間:', resource.duration);
});
2. PerformanceTiming接口`
PerformanceTiming接口提供了更詳細(xì)的頁面加載時間信息，包括各個階段的開始和結(jié)束時間。它是Performance API中用于測量頁面性能的重要接口。
- 獲取重定向耗時
- 獲取DNS解析耗時
- 獲取TCP連接耗時
使用示例：
const timing = window.performance.timing;
const redirectTime = timing.redirectEnd - timing.redirectStart;
const dnsTime = timing.domainLookupEnd - timing.domainLookupStart;
const tcpTime = timing.connectEnd - timing.connectStart;
console.log('重定向耗時：', redirectTime);
console.log('DNS解析耗時：', dnsTime);
console.log('TCP連接耗時：', tcpTime);`
3. PerformanceNavigation接口`
PerformanceNavigation接口提供了有關(guān)頁面導(dǎo)航的信息，如重定向次數(shù)、是否通過緩存加載等。它可以幫助開發(fā)者了解頁面導(dǎo)航過程中的性能指標(biāo)。
使用示例：
const navigation = window.performance.navigation;
console.log('重定向次數(shù)：', navigation.redirectCount);
console.log('是否通過緩存加載：', navigation.type === 1 ? '是' : '否');
4. PerformanceEntry接口`
PerformanceEntry接口提供了有關(guān)特定資源或事件的詳細(xì)性能信息，如資源加載時間、事件處理時間等。它可以用于監(jiān)控和分析特定資源或事件的性能。
使用示例：
// 監(jiān)控資源加載性能
window.performance.getEntriesByType('resource').forEach(entry => {
console.log('資源URL:', entry.name);
console.log('資源加載時間:', entry.duration);
console.log('資源大小:', entry.transferSize);
});
// 監(jiān)控事件處理性能
window.performance.getEntriesByType('event').forEach(entry => {
console.log('事件類型:', entry.name);
console.log('事件處理時間:', entry.duration);
});
這些示例展示了Performance API中各個接口的基本用法，開發(fā)者可以根據(jù)具體需求使用不同的接口來獲取更詳細(xì)和準(zhǔn)確的性能信息，并進(jìn)行相應(yīng)的優(yōu)化和分析。
實際應(yīng)用場景
1. 如何利用Performance API優(yōu)化網(wǎng)頁加載速度
- 使用Performance API獲取頁面加載時間，找出加載時間較長的資源，并進(jìn)行優(yōu)化。
const loadTime = window.performance.timing.loadEventEnd - window.performance.timing.navigationStart;
console.log('頁面加載時間：', loadTime);
const resources = window.performance.getEntriesByType('resource');
resources.forEach(resource => {
if (resource.duration > 1000) {
console.log('加載時間較長的資源:', resource.name);
// 進(jìn)行相應(yīng)的優(yōu)化，如壓縮、緩存等
}
});
- 使用Performance API監(jiān)控資源加載性能，找出加載時間較長的資源，并進(jìn)行優(yōu)化。
window.performance.getEntriesByType('resource').forEach(entry => {
if (entry.duration > 1000) {
console.log('加載時間較長的資源:', entry.name);
// 進(jìn)行相應(yīng)的優(yōu)化，如壓縮、緩存等
}
});
2. 如何利用Performance API監(jiān)控用戶交互性能：
- 監(jiān)控用戶點擊按鈕的交互性能。
document.querySelector('#myButton').addEventListener('click', function(event) {
const interactionTime = window.performance.now() - event.timeStamp;
console.log('用戶點擊交互時間:', interactionTime);
});
- 監(jiān)控用戶滾動頁面的交互性能。
document.addEventListener('scroll', function(event) {
const interactionTime = window.performance.now() - event.timeStamp;
console.log('用戶滾動交互時間:', interactionTime);
});
通過使用Performance API，開發(fā)者可以獲取頁面加載時間和資源加載性能，從而找出加載時間較長的資源并進(jìn)行優(yōu)化。同時，通過監(jiān)控用戶交互性能，開發(fā)者可以了解用戶與網(wǎng)頁的交互體驗，并進(jìn)行相應(yīng)的優(yōu)化。這些實際應(yīng)用場景和示例代碼可以幫助開發(fā)者更好地利用Performance API來優(yōu)化網(wǎng)頁性能。
原文地址：https://juejin.cn/post/7291586138103038010
MDN: https://developer.mozilla.org/zh-CN/docs/Web/API/Performance_API
