Performance API簡(jiǎn)介

• Performance API是什么盯荤？

  衡量和分析各種性能指標(biāo)對(duì)于確保 web 應(yīng)用的速度非常重要完疫。Performance API 提供了重要的內(nèi)置指標(biāo)，并能夠?qū)⒛阕约旱臏y(cè)量結(jié)果添加到瀏覽器的性能時(shí)間線（performance timeline）中滞乙。性能時(shí)間線使用高精度的時(shí)間戳，且可以在開發(fā)者工具中顯示鉴嗤。你還可以將相關(guān)數(shù)據(jù)發(fā)送到用于分析的端點(diǎn)斩启，以根據(jù)時(shí)間記錄性能指標(biāo)。

• Performance API的作用和優(yōu)勢(shì)

  • 1. 提供詳細(xì)的性能信息：Performance API不僅提供了頁面加載時(shí)間等基本信息醉锅，還提供了更詳細(xì)的性能數(shù)據(jù)兔簇，如各個(gè)階段的開始和結(jié)束時(shí)間、資源加載時(shí)間硬耍、事件處理時(shí)間等垄琐。這些詳細(xì)信息可以幫助開發(fā)者更準(zhǔn)確地分析和定位性能問題。

  • 2. 支持多種性能指標(biāo)：Performance API支持多種常用的性能指標(biāo)经柴，如頁面加載時(shí)間狸窘、資源加載時(shí)間、重定向次數(shù)坯认、DNS解析耗時(shí)等翻擒。這些指標(biāo)可以幫助開發(fā)者全面評(píng)估網(wǎng)頁的性能氓涣，并進(jìn)行有針對(duì)性的優(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. 提升用戶體驗(yàn)：通過使用Performance API來優(yōu)化網(wǎng)頁性能议慰，可以提升用戶的體驗(yàn)蠢古。快速加載的網(wǎng)頁可以減少用戶等待時(shí)間褒脯，流暢的交互性能可以提高用戶的操作體驗(yàn)便瑟，從而增加用戶的滿意度和留存率。

window.performance

performance.timing字段介紹

image.png

1. Performance接口`

• 獲取頁面加載時(shí)間
• 獲取頁面資源加載時(shí)間

使用示例：

`// 獲取頁面加載時(shí)間
const loadTime = window.performance.timing.loadEventEnd - window.performance.timing.navigationStart;
console.log('頁面加載時(shí)間：', loadTime);

// 獲取資源加載時(shí)間
const resources = window.performance.getEntriesByType('resource');
resources.forEach(resource => {
 console.log('資源URL:', resource.name);
 console.log('資源加載時(shí)間:', resource.duration);
}); 

2. PerformanceTiming接口`

PerformanceTiming接口提供了更詳細(xì)的頁面加載時(shí)間信息伐谈，包括各個(gè)階段的開始和結(jié)束時(shí)間。它是Performance API中用于測(cè)量頁面性能的重要接口试疙。

• 獲取重定向耗時(shí)
• 獲取DNS解析耗時(shí)
• 獲取TCP連接耗時(shí)

使用示例：

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('重定向耗時(shí)：', redirectTime);
console.log('DNS解析耗時(shí)：', dnsTime);
console.log('TCP連接耗時(shí)：', 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ì)性能信息，如資源加載時(shí)間怀跛、事件處理時(shí)間等距贷。它可以用于監(jiān)控和分析特定資源或事件的性能。

使用示例：

// 監(jiān)控資源加載性能
window.performance.getEntriesByType('resource').forEach(entry => {
 console.log('資源URL:', entry.name);
 console.log('資源加載時(shí)間:', entry.duration);
 console.log('資源大小:', entry.transferSize);
});

// 監(jiān)控事件處理性能
window.performance.getEntriesByType('event').forEach(entry => {
 console.log('事件類型:', entry.name);
 console.log('事件處理時(shí)間:', entry.duration);
});

這些示例展示了Performance API中各個(gè)接口的基本用法吻谋，開發(fā)者可以根據(jù)具體需求使用不同的接口來獲取更詳細(xì)和準(zhǔn)確的性能信息忠蝗，并進(jìn)行相應(yīng)的優(yōu)化和分析。

實(shí)際應(yīng)用場(chǎng)景

1. 如何利用Performance API優(yōu)化網(wǎng)頁加載速度

• 使用Performance API獲取頁面加載時(shí)間漓拾，找出加載時(shí)間較長(zhǎng)的資源什湘，并進(jìn)行優(yōu)化长赞。

const loadTime = window.performance.timing.loadEventEnd - window.performance.timing.navigationStart;
console.log('頁面加載時(shí)間：', loadTime);

const resources = window.performance.getEntriesByType('resource');
resources.forEach(resource => {
 if (resource.duration > 1000) {
 console.log('加載時(shí)間較長(zhǎng)的資源:', resource.name);
 // 進(jìn)行相應(yīng)的優(yōu)化，如壓縮闽撤、緩存等
 }
});

• 使用Performance API監(jiān)控資源加載性能得哆，找出加載時(shí)間較長(zhǎng)的資源，并進(jìn)行優(yōu)化哟旗。

window.performance.getEntriesByType('resource').forEach(entry => {
 if (entry.duration > 1000) {
 console.log('加載時(shí)間較長(zhǎng)的資源:', entry.name);
 // 進(jìn)行相應(yīng)的優(yōu)化贩据，如壓縮、緩存等
 }
});

2. 如何利用Performance API監(jiān)控用戶交互性能：

• 監(jiān)控用戶點(diǎn)擊按鈕的交互性能闸餐。

document.querySelector('#myButton').addEventListener('click', function(event) {
 const interactionTime = window.performance.now() - event.timeStamp;
 console.log('用戶點(diǎn)擊交互時(shí)間:', interactionTime);
});

• 監(jiān)控用戶滾動(dòng)頁面的交互性能饱亮。

document.addEventListener('scroll', function(event) {
 const interactionTime = window.performance.now() - event.timeStamp;
 console.log('用戶滾動(dòng)交互時(shí)間:', interactionTime);
});

通過使用Performance API，開發(fā)者可以獲取頁面加載時(shí)間和資源加載性能舍沙，從而找出加載時(shí)間較長(zhǎng)的資源并進(jìn)行優(yōu)化近上。同時(shí)，通過監(jiān)控用戶交互性能拂铡，開發(fā)者可以了解用戶與網(wǎng)頁的交互體驗(yàn)壹无，并進(jìn)行相應(yīng)的優(yōu)化。這些實(shí)際應(yīng)用場(chǎ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