NO IMAGE
1 Star2 Stars3 Stars4 Stars5 Stars 給文章打分!
Loading...

在chrome控制檯執行window.performance,會出現下面結果:

 

[javascript] view plain copy

簡單介紹performance中的屬性:  
memory:{  
    jsHeapSizeLimit: 1136000000 // 記憶體大小限制  
    totalJSHeapSize: 16100000 // 可使用的記憶體  
    usedJSHeapSize: 10000000 //JS 物件佔用的記憶體,一定小於 totalJSHeapSize  
}  
navigation:{  
    redirectCount:0 // 如果有重定向的話,頁面通過幾次重定向跳轉而來  
    type:0 //頁面來源型別:  
            // 0   即 TYPE_NAVIGATENEXT 正常進入的頁面(非重新整理、非重定向等)  
            // 1   即 TYPE_RELOAD       通過 window.location.reload() 重新整理的頁面  
            // 2   即 TYPE_BACK_FORWARD 通過瀏覽器的前進後退按鈕進入的頁面(歷史記錄)  
            // 255 即 TYPE_UNDEFINED    非以上方式進入的頁面  
}  
timing:{  
    connectEnd:1494406626724    // HTTP(TCP) 完成建立連線的時間(完成握手),如果是持久連線,則與 fetchStart 值相等 // 注意如果在傳輸層發生了錯誤且重新建立連線,則這裡顯示的是新建立的連線完成的時間   // 注意這裡握手結束,包括安全連線建立完成、SOCKS 授權通過  
    connectStart:1494406626724 // HTTP(TCP) 開始建立連線的時間,如果是持久連線,則與 fetchStart 值相等 // 注意如果在傳輸層發生了錯誤且重新建立連線,則這裡顯示的是新建立的連線開始的時間   
    domComplete:1494406628815   // DOM 樹解析完成,且資源也準備就緒的時間,Document.readyState 變為 complete,並將丟擲 readystatechange 相關事件  
    domContentLoadedEventEnd:1494406627789  // DOM 解析完成後,網頁內資源載入完成的時間(如 JS 指令碼載入執行完畢)  
    domContentLoadedEventStart:1494406627789 // DOM 解析完成後,網頁內資源載入開始的時間 // 在 DOMContentLoaded 事件丟擲前發生  
    domInteractive:1494406627789    // 完成解析 DOM 樹的時間,Document.readyState 變為 interactive,並將丟擲 readystatechange 相關事件  // 注意只是 DOM 樹解析完成,這時候並沒有開始載入網頁內的資源  
    domLoading:1494406627313    // 開始解析渲染 DOM 樹的時間,此時 Document.readyState 變為 loading,並將丟擲 readystatechange 相關事件  
    domainLookupEnd:1494406626724 // DNS 域名查詢完成的時間,如果使用了本地快取(即無 DNS 查詢)或持久連線,則與 fetchStart 值相等  
    domainLookupStart:1494406626724 // DNS 域名查詢開始的時間,如果使用了本地快取(即無 DNS 查詢)或持久連線,則與 fetchStart 值相等  
    fetchStart:1494406626724    // 瀏覽器準備好使用 HTTP 請求抓取文件的時間,這發生在檢查本地快取之前  
    loadEventEnd:1494406628824  // load 事件的回撥函式執行完畢的時間  
    loadEventStart:1494406628816    // load 事件傳送給文件,也即 load 回撥函式開始執行的時間 // 注意如果沒有繫結 load 事件,值為 0  
    navigationStart:1494406626724   // 在同一個瀏覽器上下文中,前一個網頁(與當前頁面不一定同域)unload 的時間戳,如果無前一個網頁 unload ,則與 fetchStart 值相等  
    redirectEnd:0   // 最後一個 HTTP 重定向完成時的時間。有跳轉且是同域名內部的重定向才算,否則值為 0  
    redirectStart:0 // 第一個 HTTP 重定向發生時的時間。有跳轉且是同域名內的重定向才算,否則值為 0  
    requestStart:1494406626757  // HTTP 請求讀取真實文件開始的時間(完成建立連線),包括從本地讀取快取 // 連線錯誤重連時,這裡顯示的也是新建立連線的時間  
    responseEnd:1494406627304   // HTTP 響應全部接收完成的時間(獲取到最後一個位元組),包括從本地讀取快取  
    responseStart:1494406627301 // HTTP 開始接收響應的時間(獲取到第一個位元組),包括從本地讀取快取  
    secureConnectionStart:0 // HTTPS 連線開始的時間,如果不是安全連線,則值為 0  
    unloadEventEnd:1494406627304    // 和 unloadEventStart 相對應,返回前一個網頁 unload 事件繫結的回撥函式執行完畢的時間戳   
    unloadEventStart:1494406627304  // 前一個網頁(與當前頁面同域)unload 的時間戳,如果無前一個網頁 unload 或者前一個網頁與當前頁面不同域,則值為 0  
}  
    
實用函式:  
1.計算載入時間  
function getPerformanceTiming() {  
   
    var performance = window.performance;  
   
    if (!performance) {  
        // 當前瀏覽器不支援  
        console.log(‘你的瀏覽器不支援 performance 介面’);  
        return;  
    }  
   
    var t = performance.timing;  
   
    var times = {};  
   
    //【重要】頁面載入完成的時間  
    //【原因】這幾乎代表了使用者等待頁面可用的時間  
    times.loadPage = t.loadEventEnd – t.navigationStart;  
   
    //【重要】解析 DOM 樹結構的時間  
    //【原因】反省下你的 DOM 樹巢狀是不是太多了!  
    times.domReady = t.domComplete – t.responseEnd;  
   
    //【重要】重定向的時間  
    //【原因】拒絕重定向!比如,http://example.com/ 就不該寫成 http://example.com  
    times.redirect = t.redirectEnd – t.redirectStart;  
   
    //【重要】DNS 查詢時間  
    //【原因】DNS 預載入做了麼?頁面內是不是使用了太多不同的域名導致域名查詢的時間太長?  
    // 可使用 HTML5 Prefetch 預查詢 DNS ,見:[HTML5 prefetch](http://segmentfault.com/a/1190000000633364)             
    times.lookupDomain = t.domainLookupEnd – t.domainLookupStart;  
   
    //【重要】讀取頁面第一個位元組的時間  
    //【原因】這可以理解為使用者拿到你的資源佔用的時間,加異地機房了麼,加CDN 處理了麼?加頻寬了麼?加 CPU 運算速度了麼?  
    // TTFB 即 Time To First Byte 的意思  
    // 維基百科:https://en.wikipedia.org/wiki/Time_To_First_Byte  
    times.ttfb = t.responseStart – t.navigationStart;  
   
    //【重要】內容載入完成的時間  
    //【原因】頁面內容經過 gzip 壓縮了麼,靜態資源 css/js 等壓縮了麼?  
    times.request = t.responseEnd – t.requestStart;  
   
    //【重要】執行 onload 回撥函式的時間  
    //【原因】是否太多不必要的操作都放到 onload 回撥函式裡執行了,考慮過延遲載入、按需載入的策略麼?  
    times.loadEvent = t.loadEventEnd – t.loadEventStart;  
   
    // DNS 快取時間  
    times.appcache = t.domainLookupStart – t.fetchStart;  
   
    // 解除安裝頁面的時間  
    times.unloadEvent = t.unloadEventEnd – t.unloadEventStart;  
   
    // TCP 建立連線完成握手的時間  
    times.connect = t.connectEnd – t.connectStart;  
   
    return times;  
   
}  
   
2.計算載入時間  
function getEntryTiming(entry) {  
   
    var t = entry;  
   
    var times = {};  
   
    // 重定向的時間  
    times.redirect = t.redirectEnd – t.redirectStart;  
   
    // DNS 查詢時間  
    times.lookupDomain = t.domainLookupEnd – t.domainLookupStart;  
   
    // 內容載入完成的時間  
    times.request = t.responseEnd – t.requestStart;  
   
    // TCP 建立連線完成握手的時間  
    times.connect = t.connectEnd – t.connectStart;  
   
    // 掛載 entry 返回  
    times.name = entry.name;  
   
    times.entryType = entry.entryType;  
   
    times.initiatorType = entry.initiatorType;  
   
    times.duration = entry.duration;  
   
    return times;  
   
}  
例如:  
var entries = window.performance.getEntries();//這個函式返回的將是一個陣列,包含了頁面中所有的 HTTP 請求  
entries.forEach(function (entry) {  
    var times = getEntryTiming(entry);  
    console.log(times);  
});  
   
時間說明:  
dom開始載入前所有花費時間=重定向時間 域名解析時間 建立連線花費時間 請求花費時間 接收資料花費時間  
   
pageLoadTime頁面載入時間=域名解析時間 建立連線花費時間 請求花費時間 接收資料花費時間 解析dom花費時間 載入dom花費時間  
   
allLoadTime頁面完全載入時間=重定向時間 域名解析時間 建立連線花費時間 請求花費時間 接收資料花費時間 解析dom花費時間 載入dom花費時間 執行onload事件花費時間  
   
resourcesLoadedTime資源載入時間=解析dom花費時間 載入dom花費時間  

相關文章

前端開發 最新文章