前端監控數據收集（perf）

所謂web,即便你我素未謀面，便知志趣相投；足不出戶，亦知世界之大。

這節咱們瞭解一下獲取用戶訪問網頁速度和Web應用程序的性能，那如何來獲取這些數據呢？咱們項目中使用PerformanceTiming 接口來獲取當前頁面中與時間相關的信息。PerformanceTiming 能夠經過只讀屬性Performance.timing 得到實現該接口的一個對象。

咱們先來看一張圖，timing API的提供了整個請求的各個階段的時間信息

PerformanceTiming.navigationStart
是一個無符號long long 型的毫秒數，表徵了從同一個瀏覽器上下文的上一個文檔卸載(unload)結束時的UNIX時間戳。若是沒有上一個文檔，這個值會和PerformanceTiming.fetchStart相同。

PerformanceTiming.unloadEventStart
是一個無符號long long 型的毫秒數，表徵了unload事件拋出時的UNIX時間戳。若是沒有上一個文檔，or if the previous document, or one of the needed redirects, is not of the same origin, 這個值會返回0.

PerformanceTiming.unloadEventEnd
是一個無符號long long 型的毫秒數，表徵了unload事件處理完成時的UNIX時間戳。若是沒有上一個文檔，or if the previous document, or one of the needed redirects, is not of the same origin, 這個值會返回0.

PerformanceTiming.redirectStart
是一個無符號long long 型的毫秒數，表徵了第一個HTTP重定向開始時的UNIX時間戳。若是沒有重定向，或者重定向中的一個不一樣源，這個值會返回0.

PerformanceTiming.redirectEnd
是一個無符號long long 型的毫秒數，表徵了最後一個HTTP重定向完成時（也就是說是HTTP響應的最後一個比特直接被收到的時間）的UNIX時間戳。若是沒有重定向，或者重定向中的一個不一樣源，這個值會返回0.

PerformanceTiming.fetchStart
是一個無符號long long 型的毫秒數，表徵了瀏覽器準備好使用HTTP請求來獲取(fetch)文檔的UNIX時間戳。這個時間點會在檢查任何應用緩存以前。

PerformanceTiming.domainLookupStart
是一個無符號long long 型的毫秒數，表徵了域名查詢開始的UNIX時間戳。若是使用了持續鏈接(persistent connection)，或者這個信息存儲到了緩存或者本地資源上，這個值將和 PerformanceTiming.fetchStart一致。

PerformanceTiming.domainLookupEnd
是一個無符號long long 型的毫秒數，表徵了域名查詢結束的UNIX時間戳。若是使用了持續鏈接(persistent connection)，或者這個信息存儲到了緩存或者本地資源上，這個值將和 PerformanceTiming.fetchStart一致。

PerformanceTiming.connectStart
是一個無符號long long 型的毫秒數，返回HTTP請求開始向服務器發送時的Unix毫秒時間戳。若是使用持久鏈接（persistent connection），則返回值等同於fetchStart屬性的值。

PerformanceTiming.connectEnd
是一個無符號long long 型的毫秒數，返回瀏覽器與服務器之間的鏈接創建時的Unix毫秒時間戳。若是創建的是持久鏈接，則返回值等同於fetchStart屬性的值。鏈接創建指的是全部握手和認證過程所有結束。

PerformanceTiming.secureConnectionStart
是一個無符號long long 型的毫秒數，返回瀏覽器與服務器開始安全連接的握手時的Unix毫秒時間戳。若是當前網頁不要求安全鏈接，則返回0。

PerformanceTiming.requestStart
是一個無符號long long 型的毫秒數，返回瀏覽器向服務器發出HTTP請求時（或開始讀取本地緩存時）的Unix毫秒時間戳。

PerformanceTiming.responseStart
是一個無符號long long 型的毫秒數，返回瀏覽器從服務器收到（或從本地緩存讀取）第一個字節時的Unix毫秒時間戳。若是傳輸層在開始請求以後失敗而且鏈接被重開，該屬性將會被數製成新的請求的相對應的發起時間。

PerformanceTiming.responseEnd
是一個無符號long long 型的毫秒數，返回瀏覽器從服務器收到（或從本地緩存讀取，或從本地資源讀取）最後一個字節時（若是在此以前HTTP鏈接已經關閉，則返回關閉時）的Unix毫秒時間戳。

PerformanceTiming.domLoading
是一個無符號long long 型的毫秒數，返回當前網頁DOM結構開始解析時（即Document.readyState屬性變爲「loading」、相應的 readystatechange事件觸發時）的Unix毫秒時間戳。

PerformanceTiming.domInteractive
是一個無符號long long 型的毫秒數，返回當前網頁DOM結構結束解析、開始加載內嵌資源時（即Document.readyState屬性變爲「interactive」、相應的readystatechange事件觸發時）的Unix毫秒時間戳。

PerformanceTiming.domContentLoadedEventStart
是一個無符號long long 型的毫秒數，返回當解析器發送DOMContentLoaded 事件，即全部須要被執行的腳本已經被解析時的Unix毫秒時間戳。

PerformanceTiming.domContentLoadedEventEnd
是一個無符號long long 型的毫秒數，返回當全部須要當即執行的腳本已經被執行（不論執行順序）時的Unix毫秒時間戳。

PerformanceTiming.domComplete
是一個無符號long long 型的毫秒數，返回當前文檔解析完成，即Document.readyState 變爲 'complete'且相對應的readystatechange 被觸發時的Unix毫秒時間戳。

PerformanceTiming.loadEventStart
是一個無符號long long 型的毫秒數，返回該文檔下，load事件被髮送時的Unix毫秒時間戳。若是這個事件還未被髮送，它的值將會是0。

PerformanceTiming.loadEventEnd
是一個無符號long long 型的毫秒數，返回當load事件結束，即加載事件完成時的Unix毫秒時間戳。若是這個事件還未被髮送，或者還沒有完成，它的值將會是0.

重點來了！！！看了以上參數，咱們想要的數據來源有了，如今要作的即是去整理這些數據，將他變成咱們項目中使用的數據。咱們將要收集的時間歸爲兩類：

1.區間階段耗時

DNS 解析耗時

dns: timing.domainLookupEnd - timing.domainLookupStart

TCP 鏈接耗時

tcp: timing.connectEnd - timing.connectStart

SSL 安全鏈接耗時

ssl: timing.connectEnd - timing.secureConnectionStart

Time to First Byte（TTFB），網絡請求耗時 TTFB 有多種計算方式，ARMS 以 Google Development 定義爲準

ttfb: timing.responseStart - timing.requestStart

數據傳輸耗時

trans: timing.responseEnd - timing.responseStart

DOM 解析耗時

dom: timing.domInteractive - timing.responseEnd

資源加載耗時

res: timing.loadEventStart - timing.domContentLoadedEventEnd

2.關鍵性能指標

首包時間

firstbyte: timing.responseStart - timing.domainLookupStart

First Paint Time, 首次渲染時間 / 白屏時間

fpt: timing.responseEnd - timing.fetchStart

Time to Interact，首次可交互時間

tti: timing.domInteractive - timing.fetchStart

HTML 加載完成時間， 即 DOM Ready 時間

ready: timing.domContentLoadedEventEnd - timing.fetchStart

頁面徹底加載時間

load:timing.loadEventEnd - timing.fetchStart

如今這兩部分數據有了，咱們就能夠將這些數據上傳到咱們後臺服務上去了，是否是很簡單呢，^_^。對於如何展現咱們收集的數據，請前往（http://hubing.online:8083）瞅一眼哦。

不是很明白？那我再附上一些源碼吧

//監聽perf
    let performanceTime = function () {
        var timing = performance.timing;
        var loadTime = timing.loadEventEnd - timing.navigationStart;//過早獲取時,loadEventEnd有時會是0
        if (loadTime <= 0) {
            // 未加載完，延遲200ms後繼續times方法，直到成功
            setTimeout(function () {
                performanceTime();
            }, 200);
            return;
        }
        uploadUserData(1, {
            // 1.區間階段耗時
            //  DNS 解析耗時 
            dns: formatTime(timing.domainLookupEnd - timing.domainLookupStart),
            // TCP 鏈接耗時
            tcp: formatTime(timing.connectEnd - timing.connectStart),
            // SSL 安全鏈接耗時
            ssl: formatTime(timing.connectEnd - timing.secureConnectionStart),
            // Time to First Byte（TTFB），網絡請求耗時 TTFB 有多種計算方式，ARMS 以 Google Development 定義爲準
            ttfb: formatTime(timing.responseStart - timing.requestStart),
            // 數據傳輸耗時
            trans: formatTime(timing.responseEnd - timing.responseStart),
            // DOM 解析耗時
            dom: formatTime(timing.domInteractive - timing.responseEnd),
            // 資源加載耗時
            res: formatTime(timing.loadEventStart - timing.domContentLoadedEventEnd),
            // 2.關鍵性能指標
            // 首包時間
            firstbyte: formatTime(timing.responseStart - timing.domainLookupStart),
            // First Paint Time, 首次渲染時間 / 白屏時間
            fpt: formatTime(timing.responseEnd - timing.fetchStart),
            // Time to Interact，首次可交互時間
            tti: formatTime(timing.domInteractive - timing.fetchStart),
            // HTML 加載完成時間， 即 DOM Ready 時間
            ready: formatTime(timing.domContentLoadedEventEnd - timing.fetchStart),
            // 頁面徹底加載時間
            load: function () {
                return formatTime(timing.loadEventEnd - timing.fetchStart);
            }(),
            navt: (function () {
                let type = "";
                switch (performance.navigation.type) {
                    case 0:
                        type = 'NAVIGATE';
                        break;
                    case 1:
                        type = 'RELOAD';
                        break;
                    case 2:
                        type = 'BACK_FORWARD';
                        break;
                    case 255:
                        type = 'RESERVED';
                        break;
                }
                return type;
            })()
        });
    }
​
    window.addEventListener("load", function () {
        performanceTime();
    });

---

喜歡請點個讚唄

或者去https://github.com/kisslove/w... Star一下

或者打賞一下

再或者……

哈哈，想法有點多了。