performance分析

有關performance官網地址

前言

瀏覽器提供的 performance api，是性能監控數據的主要來源。performance 提供高精度的時間戳，精度可達納秒級別，且不會隨操作系統時間設置的影響。

 

 

基本屬性

在控制台我們打印performance，可以看到下面這些api：

 

 

 

 

 

 

屬性分析

performance.navigation: 頁面是加載還是刷新、發生了多少次重定向

 

 

 

performance.timing: 頁面加載的各階段時長

 

 

 各個階段含義

 

 

 

performance.memory：基本內存使用情況，Chrome 添加的一個非標准擴展

 

 

performance.timeorigin: 性能測量開始時的時間的高精度時間戳

 

 

 

基本方法

 performance.getEntries()

通過這個方法可以獲取到所有的 performance 實體對象，通過 getEntriesByName 和 getEntriesByType 方法可對所有的 performance 實體對象 進行過濾，返回特定類型的實體。

mark 方法 和 measure 方法的結合可打點計時，獲取某個函數執行耗時等。

 

 

 

• performance.getEntriesByName()
• performance.getEntriesByType()
• performance.mark()
• performance.clearMarks()
• performance.measure()
• performance.clearMeasures()
• performance.now() ...

 

提供的 API

performance 也提供了多種 API，不同的 API 之間可能會有重疊的部分。

1. PerformanceObserver API

用於檢測性能的事件，這個 API 利用了觀察者模式。

獲取資源信息：

 

 

 

監測 TTI：

 

 

監測 長任務：

 

 

2. Navigation Timing API

performance.getEntriesByType("navigation")

 

 

 

 

 

不同階段之間是不連續的，每個階段不一定會發生

• 重定向次數：performance.navigation.redirectCount
• 重定向耗時: redirectEnd - redirectStart
• DNS 解析耗時: domainLookupEnd - domainLookupStart
• TCP 連接耗時: connectEnd - connectStart
• SSL 安全連接耗時: connectEnd - secureConnectionStart
• 網絡請求耗時 (TTFB): responseStart - requestStart
• 數據傳輸耗時: responseEnd - responseStart
• DOM 解析耗時: domInteractive - responseEnd
• 資源加載耗時: loadEventStart - domContentLoadedEventEnd
• 首包時間: responseStart - domainLookupStart
• 白屏時間: responseEnd - fetchStart
• 首次可交互時間: domInteractive - fetchStart
• DOM Ready 時間: domContentLoadEventEnd - fetchStart
• 頁面完全加載時間: loadEventStart - fetchStart
• http 頭部大小：transferSize - encodedBodySize

3. Resource Timing API

 performance.getEntriesByType("resource")

 

 

 

 

// 某類資源的加載時間，可測量圖片、js、css、XHR
resourceListEntries.forEach(resource => {
    if (resource.initiatorType == 'img') {
    console.info(`Time taken to load ${resource.name}: `, resource.responseEnd - resource.startTime);
    }
});

 

4. paint Timing API

首屏渲染時間、首次有內容渲染時間

 

 

5. User Timing API

主要是利用 mark 和 measure 方法去打點計算某個階段的耗時，例如某個函數的耗時等。

 

6. High Resolution Time API

主要包括 now() 方法和 timeOrigin 屬性

 

7. Performance Timeline API

 

小結

基於 performance 我們可以測量如下幾個方面：

mark、measure、navigation、resource、paint、frame。

let p = window.performance.getEntries();

重定向次數：performance.navigation.redirectCount

JS 資源數量: p.filter(ele => ele.initiatorType === "script").length

CSS 資源數量：p.filter(ele => ele.initiatorType === "css").length

AJAX 請求數量：p.filter(ele => ele.initiatorType === "xmlhttprequest").length

IMG 資源數量：p.filter(ele => ele.initiatorType === "img").length

總資源數量: window.performance.getEntriesByType("resource").length

 

不重復的耗時時段區分：

• 重定向耗時: redirectEnd - redirectStart
• DNS 解析耗時: domainLookupEnd - domainLookupStart
• TCP 連接耗時: connectEnd - connectStart
• SSL 安全連接耗時: connectEnd - secureConnectionStart
• 網絡請求耗時 (TTFB): responseStart - requestStart
• HTML 下載耗時：responseEnd - responseStart
• DOM 解析耗時: domInteractive - responseEnd
• 資源加載耗時: loadEventStart - domContentLoadedEventEnd

其他組合分析：

• 白屏時間: domLoading - fetchStart
• 粗略首屏時間: loadEventEnd - fetchStart 或者 domInteractive - fetchStart
• DOM Ready 時間: domContentLoadEventEnd - fetchStart
• 頁面完全加載時間: loadEventStart - fetchStart

JS 總加載耗時:

const p = window.performance.getEntries();
let cssR = p.filter(ele => ele.initiatorType === "script");
Math.max(...cssR.map((ele) => ele.responseEnd)) - Math.min(...cssR.map((ele) => ele.startTime))

CSS 總加載耗時:

const p = window.performance.getEntries();
let cssR = p.filter(ele => ele.initiatorType === "css");
Math.max(...cssR.map((ele) => ele.responseEnd)) - Math.min(...cssR.map((ele) => ele.startTime));

 

  本文分享到這里，給朋友們推薦一個前端公眾號