js收集頁面加載性能數據

window.performance

[performance.timing]:

navigationStart: 表示從上一個文檔卸載結束時的 unix 時間戳，如果沒有上一個文檔，這個值將和 fetchStart 相等。
unloadEventStart: 表示前一個網頁（與當前頁面同域）unload 的時間戳，如果無前一個網頁 unload 或者前一個網頁與當前頁面不同域，則值爲 0。
unloadEventEnd: 返回前一個頁面 unload 時間綁定的回掉函數執行完畢的時間戳。
redirectStart: 第一個 HTTP 重定向發生時的時間。有跳轉且是同域名內的重定向纔算，否則值爲 0。
redirectEnd: 最後一個 HTTP 重定向完成時的時間。有跳轉且是同域名內部的重定向纔算，否則值爲 0。
fetchStart: 瀏覽器準備好使用 HTTP 請求抓取文檔的時間，這發生在檢查本地緩存之前。
domainLookupStart/domainLookupEnd: DNS 域名查詢開始/結束的時間，如果使用了本地緩存（即無 DNS 查詢）或持久連接，則與 fetchStart 值相等
connectStart: HTTP（TCP）開始/重新 建立連接的時間，如果是持久連接，則與 fetchStart 值相等。
connectEnd: HTTP（TCP） 完成建立連接的時間（完成握手），如果是持久連接，則與 fetchStart 值相等。
secureConnectionStart: HTTPS 連接開始的時間，如果不是安全連接，則值爲 0。
requestStart: HTTP 請求讀取真實文檔開始的時間（完成建立連接），包括從本地讀取緩存。
responseStart: HTTP 開始接收響應的時間（獲取到第一個字節），包括從本地讀取緩存。
responseEnd: HTTP 響應全部接收完成的時間（獲取到最後一個字節），包括從本地讀取緩存。
domLoading: 開始解析渲染 DOM 樹的時間，此時 Document.readyState 變爲 loading，並將拋出 readystatechange 相關事件。
domInteractive: 完成解析 DOM 樹的時間，Document.readyState 變爲 interactive，並將拋出 readystatechange 相關事件，注意只是 DOM 樹解析完成，這時候並沒有開始加載網頁內的資源。
domContentLoadedEventStart: DOM 解析完成後，網頁內資源加載開始的時間，在 DOMContentLoaded 事件拋出前發生。
domContentLoadedEventEnd: DOM 解析完成後，網頁內資源加載完成的時間（如 JS 腳本加載執行完畢）。
domComplete: DOM 樹解析完成，且資源也準備就緒的時間，Document.readyState 變爲 complete，並將拋出 readystatechange 相關事件。
loadEventStart: load 事件發送給文檔，也即 load 回調函數開始執行的時間。
loadEventEnd: load 事件的回調函數執行完畢的時間。

;(function() {
    if (window.performance) {
        const info = window.performance.timing;
        const details = [
            {
                title: '網頁重定向的耗時',
                value: info.redirectEnd - info.redirectStart + 'ms'
            },
            {
                title: '檢查本地緩存的耗時',
                value: info.domainLookupStart - info.fetchStart + 'ms'
            },
            {
                title: 'DNS查詢的耗時',
                value: info.domainLookupEnd - info.domainLookupStart + 'ms'
            },
            {
                title: 'TCP連接的耗時',
                value: info.connectEnd - info.connectStart + 'ms'
            },
            {
                title: '客戶端發起請求的耗時',
                value: info.responseStart - info.requestStart + 'ms'
            },
            {
                title: '服務端響應的耗時',
                value: info.responseEnd - info.responseStart + 'ms'
            },
            {
                title: '渲染頁面的耗時',
                value: info.domComplete - info.responseEnd + 'ms'
            },
            {
                title: '解析DOM樹耗時',
                value: info.domComplete - info.domInteractive + 'ms'
            },
            {
                title: '白屏時間',
                value: info.domLoading - info.fetchStart + 'ms'
            },
            {
                title: 'DOMContentLoaded',
                value: info.domContentLoadedEventEnd - info.fetchStart + 'ms'
            },
            {
                title: 'Loaded',
                value: info.loadEventEnd - info.connectStart + 'ms'
            }
        ];

        console.log(details);
    }
}())