摘要：連接建立指的是所有握手和認證過程全部結(jié)束。是一個無符號型的毫秒數(shù)，返回當(dāng)所有需要立即執(zhí)行的腳本已經(jīng)被執(zhí)行不論執(zhí)行順序時的毫秒時間戳。對于如何展示我們收集的數(shù)據(jù)，請前往瞅一眼哦。

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

這節(jié)我們了解一下獲取用戶訪問網(wǎng)頁速度和Web應(yīng)用程序的性能，那如何來獲取這些數(shù)據(jù)呢？我們項目中使用PerformanceTiming 接口來獲取當(dāng)前頁面中與時間相關(guān)的信息。PerformanceTiming 可以通過只讀屬性Performance.timing 獲得實現(xiàn)該接口的一個對象。

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

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

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

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

PerformanceTiming.redirectStart
是一個無符號long long 型的毫秒數(shù)，表征了第一個HTTP重定向開始時的UNIX時間戳。如果沒有重定向，或者重定向中的一個不同源，這個值會返回0.

PerformanceTiming.redirectEnd
是一個無符號long long 型的毫秒數(shù)，表征了最后一個HTTP重定向完成時（也就是說是HTTP響應(yīng)的最后一個比特直接被收到的時間）的UNIX時間戳。如果沒有重定向，或者重定向中的一個不同源，這個值會返回0.

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

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

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

PerformanceTiming.connectStart
是一個無符號long long 型的毫秒數(shù)，返回HTTP請求開始向服務(wù)器發(fā)送時的Unix毫秒時間戳。如果使用持久連接（persistent connection），則返回值等同于fetchStart屬性的值。

PerformanceTiming.connectEnd
是一個無符號long long 型的毫秒數(shù)，返回瀏覽器與服務(wù)器之間的連接建立時的Unix毫秒時間戳。如果建立的是持久連接，則返回值等同于fetchStart屬性的值。連接建立指的是所有握手和認證過程全部結(jié)束。

PerformanceTiming.secureConnectionStart
是一個無符號long long 型的毫秒數(shù)，返回瀏覽器與服務(wù)器開始安全鏈接的握手時的Unix毫秒時間戳。如果當(dāng)前網(wǎng)頁不要求安全連接，則返回0。

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

PerformanceTiming.responseStart
是一個無符號long long 型的毫秒數(shù)，返回瀏覽器從服務(wù)器收到（或從本地緩存讀取）第一個字節(jié)時的Unix毫秒時間戳。如果傳輸層在開始請求之后失敗并且連接被重開，該屬性將會被數(shù)制成新的請求的相對應(yīng)的發(fā)起時間。

PerformanceTiming.responseEnd
是一個無符號long long 型的毫秒數(shù)，返回瀏覽器從服務(wù)器收到（或從本地緩存讀取，或從本地資源讀取）最后一個字節(jié)時（如果在此之前HTTP連接已經(jīng)關(guān)閉，則返回關(guān)閉時）的Unix毫秒時間戳。

PerformanceTiming.domLoading
是一個無符號long long 型的毫秒數(shù)，返回當(dāng)前網(wǎng)頁DOM結(jié)構(gòu)開始解析時（即Document.readyState屬性變?yōu)椤發(fā)oading”、相應(yīng)的 readystatechange事件觸發(fā)時）的Unix毫秒時間戳。

PerformanceTiming.domInteractive
是一個無符號long long 型的毫秒數(shù)，返回當(dāng)前網(wǎng)頁DOM結(jié)構(gòu)結(jié)束解析、開始加載內(nèi)嵌資源時（即Document.readyState屬性變?yōu)椤癷nteractive”、相應(yīng)的readystatechange事件觸發(fā)時）的Unix毫秒時間戳。

PerformanceTiming.domContentLoadedEventStart
是一個無符號long long 型的毫秒數(shù)，返回當(dāng)解析器發(fā)送DOMContentLoaded 事件，即所有需要被執(zhí)行的腳本已經(jīng)被解析時的Unix毫秒時間戳。

PerformanceTiming.domContentLoadedEventEnd
是一個無符號long long 型的毫秒數(shù)，返回當(dāng)所有需要立即執(zhí)行的腳本已經(jīng)被執(zhí)行（不論執(zhí)行順序）時的Unix毫秒時間戳。

PerformanceTiming.domComplete
是一個無符號long long 型的毫秒數(shù)，返回當(dāng)前文檔解析完成，即Document.readyState 變?yōu)?"complete"且相對應(yīng)的readystatechange 被觸發(fā)時的Unix毫秒時間戳。

PerformanceTiming.loadEventStart
是一個無符號long long 型的毫秒數(shù)，返回該文檔下，load事件被發(fā)送時的Unix毫秒時間戳。如果這個事件還未被發(fā)送，它的值將會是0。

PerformanceTiming.loadEventEnd
是一個無符號long long 型的毫秒數(shù)，返回當(dāng)load事件結(jié)束，即加載事件完成時的Unix毫秒時間戳。如果這個事件還未被發(fā)送，或者尚未完成，它的值將會是0.

重點來了！！！看了以上參數(shù)，我們想要的數(shù)據(jù)來源有了，現(xiàn)在要做的便是去整理這些數(shù)據(jù)，將他變成我們項目中使用的數(shù)據(jù)。我們將要收集的時間歸為兩類：

1.區(qū)間階段耗時

DNS 解析耗時

dns: timing.domainLookupEnd - timing.domainLookupStart

TCP 連接耗時

tcp: timing.connectEnd - timing.connectStart

SSL 安全連接耗時

ssl: timing.connectEnd - timing.secureConnectionStart

Time to First Byte（TTFB），網(wǎng)絡(luò)請求耗時 TTFB 有多種計算方式，ARMS 以 Google Development 定義為準(zhǔn)

ttfb: timing.responseStart - timing.requestStart

數(shù)據(jù)傳輸耗時

trans: timing.responseEnd - timing.responseStart

DOM 解析耗時

dom: timing.domInteractive - timing.responseEnd

資源加載耗時

res: timing.loadEventStart - timing.domContentLoadedEventEnd

2.關(guān)鍵性能指標(biāo)

首包時間

firstbyte: timing.responseStart - timing.domainLookupStart

First Paint Time, 首次渲染時間 / 白屏?xí)r間

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

現(xiàn)在這兩部分數(shù)據(jù)有了，我們就可以將這些數(shù)據(jù)上傳到我們后臺服務(wù)上去了，是不是很簡單呢，^_^。對于如何展示我們收集的數(shù)據(jù)，請前往（http://hubing.online:8083）瞅一眼哦。

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

    //監(jiān)聽perf
    let performanceTime = function () {
        var timing = performance.timing;
        var loadTime = timing.loadEventEnd - timing.navigationStart;//過早獲取時,loadEventEnd有時會是0
        if (loadTime <= 0) {
            // 未加載完，延遲200ms后繼續(xù)times方法，直到成功
            setTimeout(function () {
                performanceTime();
            }, 200);
            return;
        }
        uploadUserData(1, {
            // 1.區(qū)間階段耗時
            //  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），網(wǎng)絡(luò)請求耗時 TTFB 有多種計算方式，ARMS 以 Google Development 定義為準(zhǔn)
            ttfb: formatTime(timing.responseStart - timing.requestStart),
            // 數(shù)據(jù)傳輸耗時
            trans: formatTime(timing.responseEnd - timing.responseStart),
            // DOM 解析耗時
            dom: formatTime(timing.domInteractive - timing.responseEnd),
            // 資源加載耗時
            res: formatTime(timing.loadEventStart - timing.domContentLoadedEventEnd),
            // 2.關(guān)鍵性能指標(biāo)
            // 首包時間
            firstbyte: formatTime(timing.responseStart - timing.domainLookupStart),
            // First Paint Time, 首次渲染時間 / 白屏?xí)r間
            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一下

或者打賞一下

再或者……

哈哈，想法有點多了。