window.performance 詳解

https://github.com/fredshare/blog/issues/5

 

window.performance詳解

performance的作用

瀏覽器暴露給js的一個接口，可以通過這個接口查看用戶訪問網站的連接建立時間、dns時間等信息。使用該api時需要在頁面完全加載完成之后才能使用，最簡單的辦法是在window.onload事件中讀取各種數據，因為很多值必須在頁面完全加載之后才能得出。

瀏覽器支持情況

IE9和chrome6以上的版本都支持：

• pc端
• window.performance : ie9
• window.webkitPerformance : chrome6-9
• window.performance : chrome10+
• 移動端
• android4.0

各個值的詳細含義

可以看到api的接口定義如下：

memory：瀏覽器內存情況

1. jsHeapSizeLimit
2. totalJSHeapSize
3. usedJSHeapSize
   注：usedJSHeapSize表示所有被使用的js堆棧內存；totalJSHeapSize表示當前js堆棧內存總大小，這表示usedJSHeapSize不能大於totalJSHeapSize，如果大於，有可能出現了內存泄漏。

navigation ：網頁導航相關

1. redirectCount：重定向屬性
   一個只讀屬性，返回當前頁面是幾次重定向才過來的。但是這個接口有同源策略限制，即僅能檢測同源的重定向。
2. type
   返回值應該是0,1,2 中的一個。分別對應三個枚舉值:
   
   0 : TYPE_NAVIGATE (用戶通過常規導航方式訪問頁面，比如點一個鏈接，或者一般的get方式)
   
   1 : TYPE_RELOAD (用戶通過刷新，包括JS調用刷新接口等方式訪問頁面)
   
   2 : TYPE_BACK_FORWARD (用戶通過后退按鈕訪問本頁面)

timing ：測速相關

navigationStart：准備加載新頁面的起始時間
redirectStart：如果發生了HTTP重定向，並且從導航開始，中間的每次重定向，都和當前文檔同域的話，就返回開始重定向的timing.fetchStart的值。其他情況，則返回0
redirectEnd：如果發生了HTTP重定向，並且從導航開始，中間的每次重定向，都和當前文檔同域的話，就返回最后一次重定向，接收到最后一個字節數據后的那個時間.其他情況則返回0
fetchStart：如果一個新的資源獲取被發起，則 fetchStart必須返回用戶代理開始檢查其相關緩存的那個時間，其他情況則返回開始獲取該資源的時間
domainLookupStart：返回用戶代理對當前文檔所屬域進行DNS查詢開始的時間。如果此請求沒有DNS查詢過程，如長連接，資源cache,甚至是本地資源等。 那么就返回 fetchStart的值
domainLookupEnd：返回用戶代理對結束對當前文檔所屬域進行DNS查詢的時間。如果此請求沒有DNS查詢過程，如長連接，資源cache，甚至是本地資源等。那么就返回 fetchStart的值
connectStart：返回用戶代理向服務器服務器請求文檔，開始建立連接的那個時間，如果此連接是一個長連接，又或者直接從緩存中獲取資源（即沒有與服務器建立連接）。則返回domainLookupEnd的值
(secureConnectionStart)：可選特性。用戶代理如果沒有對應的東東，就要把這個設置為undefined。如果有這個東東，並且是HTTPS協議，那么就要返回開始SSL握手的那個時間。 如果不是HTTPS， 那么就返回0
connectEnd：返回用戶代理向服務器服務器請求文檔，建立連接成功后的那個時間，如果此連接是一個長連接，又或者直接從緩存中獲取資源（即沒有與服務器建立連接）。則返回domainLookupEnd的值
requestStart：返回從服務器、緩存、本地資源等，開始請求文檔的時間
responseStart：返回用戶代理從服務器、緩存、本地資源中，接收到第一個字節數據的時間
responseEnd：返回用戶代理接收到最后一個字符的時間，和當前連接被關閉的時間中，更早的那個。同樣，文檔可能來自服務器、緩存、或本地資源
domLoading：返回用戶代理把其文檔的 "current document readiness" 設置為 "loading"的時候
domInteractive：返回用戶代理把其文檔的 "current document readiness" 設置為 "interactive"的時候.
domContentLoadedEventStart：返回文檔發生 DOMContentLoaded事件的時間
domContentLoadedEventEnd：文檔的DOMContentLoaded 事件的結束時間
domComplete：返回用戶代理把其文檔的 "current document readiness" 設置為 "complete"的時候
loadEventStart：文檔觸發load事件的時間。如果load事件沒有觸發，那么該接口就返回0
loadEventEnd：文檔觸發load事件結束后的時間。如果load事件沒有觸發，那么該接口就返回0

組合值的意義

DNS查詢耗時 ：domainLookupEnd - domainLookupStart
TCP鏈接耗時 ：connectEnd - connectStart
request請求耗時 ：responseEnd - responseStart
解析dom樹耗時 ： domComplete - domInteractive
白屏時間 ：responseStart - navigationStart
domready時間 ：domContentLoadedEventEnd - navigationStart
onload時間 ：loadEventEnd - navigationStart

 

performance.getEntries 資源測速

比如圖中type為img的圖片整個加載時間為duration ms。
可以通過這個接口統計整個頁面有多少img、css、js以及對應的下載時間等信息。

常用統計方法

performance 測速上報

/**
 * 上報Performance timing數據；
 * 如果某個時間點花費時間為0，則此時間點數據不上報。
 * @param {String}
 *            f1 flag1簡寫，測速系統中的業務ID，譬如校友業務為164
 * @param {String}
 *            f2 flag2簡寫，測速的站點ID
 * @param {String}
 *            f3_ie flag3簡寫，測速的頁面ID
 *（因為使用過程中我們發現IE9的某些數據存在異常，
 * 如果IE9和chrome合並統計，會影響分析結果，所以這里建議分開統計）
 * @param {String}
 *            f3_c flag3簡寫，測速的頁面ID
 * （如果為空，則IE9和chrome合並統計）
 */
function setTimingRpt(f1, f2, f3_ie, f3_c){     
    var _t, _p = (window.webkitPerformance ? window.webkitPerformance : window.msPerformance), _ta = ["navigationStart","unloadEventStart","unloadEventEnd","redirectStart","redirectEnd","fetchStart","domainLookupStart","domainLookupEnd","connectStart","connectEnd","requestStart",/*10*/"responseStart","responseEnd","domLoading","domInteractive","domContentLoadedEventStart","domContentLoadedEventEnd","domComplete","loadEventStart","loadEventEnd"], _da = [], _t0, _tmp, f3 = f3_ie;  
    _p = (_p ? _p : window.performance);        
    if (_p && (_t = _p.timing)) {       
        if (!_t.domContentLoadedEventStart) {
            _ta.splice(15, 2, 'domContentLoaded', 'domContentLoaded');
        } else {
            if (f3_c) {
                f3 = f3_c;
            }
        }           
        _t0 = _t[_ta[0]];
        for (var i = 1, l = _ta.length; i < l; i++) {
            _tmp = _t[_ta[i]];
            _tmp = (_tmp ? (_tmp - _t0) : 0);
            if (_tmp > 0) {
                _da.push( i + '=' + _tmp);
            }
        }           
        if (window.d0) {//統計頁面初始化時的d0時間
            _da.push('30=' + (window.d0 - _t0));
        }           
        var url = 'http://www.report.com?flag1=' + f1 + '&flag2=' + f2 + '&flag3=' + f3 + '&' + _da.join('&');      
        var _img = new Image();
        setTimeout(function(){
            _img.src = url;
        }, 10);
    }       
};
//注意！需要在onload事件后進行計算上報。
window.onload = function(){
    setTimingRpt(7839, 7, 3);//活動頁面
};