Getting started in window.performance

如何理解 window.performance

window.performance 是由 W3C 性能小組提出的用於精確計算網頁性能數據的特性，它返一個 Performance 對象，支持 IE9 以上的全部瀏覽器，這裏給出對象的原型：

Performance.timing

返回 PerformanceTiming 對象，包含延遲相關的性能信息。

Performance.navigation

返回 PerformanceNavigation 對象，該對象表示在當前給定瀏覽上下文中網頁導航的類型（TYPE_BACK_FORWARD，TYPE_NAVIGATE，TYPE_RELOAD，TYPE_RESERVED）以及次數。

performance.memory

在 Chrome 中添加的一個非標準擴展，返回內存佔用的基本信息。（儘可能避免使用非標準化API）

Performance.timeOrigin

返回關於性能評估的開始時間（高分辨率時間戳）

Performance.onresourcetimingbufferfull

當 resourcetimingbufferfull 事件觸發時，做爲事件處理回調

function buffer_full_handler(event) {
    console.log('[Warning]: Resource Timing Buffer is full');
    performance.setResourceTimingBufferSize(200); // size >= 150
}

function initPerformanceMeasurement() {
    if (performance === undefined) {
        console.log("[Warning]: Performance interface is not supported");
        return
    }
    // Set a callback if the resource buffer becomes filled
    performance.onresourcetimingbufferfull = buffer_full_handler;
}

document.body.onload = initPerformanceMeasurement;

一般建議 performance entry 應該知足至少 150 個以上

爲什麼使用 Performance

一般熟悉 Chrome 開發者工具的朋友都會在開發環境下用到網絡面板的相關操做，當咱們開啓記錄功能時，就會實時傳回關於網頁響應階段的性能數據，但當咱們須要統計分析用戶打開網頁時的性能，所以咱們將 performance 原始信息或經過簡單計算後的信息上傳到服務器，配合其餘網絡屬性（例如 HTTP 請求頭信息），就能夠很好地進行性能上報。

項目中的應用

1.判斷是否刷新頁面

const performance = window.performance

if(performance.navigation.type === 1) {
    console.log('Page was not reloaded.')
} else {
    console.log('Page was reloaded.')
}

這裏的 performance.navigation.type 返回一個整數值，表示網頁的加載來源，有如下幾種狀況：

返回值：0
類型常量：performance.navigation.TYPE_NAVIGATENEXT
描述：網頁經過點擊連接、地址欄輸入、表單提交、腳本操做等方式加載

返回值：1
類型常量：performance.navigation.TYPE_RELOAD
描述：網頁經過 刷新 按鈕或者 location.reload() 方法加載

返回值：2
類型常量：performance.navigation.TYPE_BACK_FORWARD
描述；網頁經過 前進 或 後退 按鈕加載

返回值：255
類型常量：performance.navigation.TYPE_UNDEFINED
描述：網頁經過其它 任何可執行的來源 加載

此外，經過 performance.navigation.redirectCount 能夠獲取當前網頁重定向跳轉的次數

2.測試函數執行時間

function fac() {
    return n === 1 ? 1 : n * arguments.callee(n - 1)
}

let t1 = window.performance.now()
fac(100)
let t2 = window.performance.now()
console.log('diff: ', t2 - t1, ' ms')

// output: diff: 0.14500000001862645 ms

未完待續...