利用performance屬性查看網頁性能

一般我們可以通過瀏覽器的調試工具-網絡面板，或者代理工具查看網頁加載過程中的各個階段的耗時。而利用window.performance屬性則可以獲得更為精確的原始數據，以毫秒為單位，精確到微秒。

 

performance.timing屬性介紹

圖片說明如下：

屬性說明：

• navigationStart：瀏覽器處理當前網頁的啟動時間
• fetchStart：瀏覽器發起http請求讀取文檔的毫秒時間戳。
• domainLookupStart：域名查詢開始時的時間戳。
• domainLookupEnd：域名查詢結束時的時間戳。
• connectStart：http請求開始向服務器發送的時間戳。
• connectEnd：瀏覽器與服務器連接建立（握手和認證過程結束）的毫秒時間戳。
• requestStart：瀏覽器向服務器發出http請求時的時間戳。或者開始讀取本地緩存時。
• responseStart：瀏覽器從服務器（或讀取本地緩存）收到第一個字節時的時間戳。
• responseEnd：瀏覽器從服務器收到最后一個字節時的毫秒時間戳。
• domLoading：瀏覽器開始解析網頁DOM結構的時間。
• domInteractive：網頁dom樹創建完成，開始加載內嵌資源的時間。
• domContentLoadedEventStart：網頁DOMContentLoaded事件發生時的時間戳。
• domContentLoadedEventEnd：網頁所有需要執行的腳本執行完成時的時間，domReady的時間。
• domComplete：網頁dom結構生成時的時間戳。
• loadEventStart：當前網頁load事件的回調函數開始執行的時間戳。
• loadEventEnd：當前網頁load事件的回調函數結束運行時的時間戳。

 

性能數據分析

1.DNS尋址時間：t.domainLookupEnd - t.domainLookupStart。

優化方法：檢查頁面是否添加了DNS預解析代碼。

<link rel="dns-prefetch" href="//haitao.nosdn1.127.net">

是否合理利用域名發散與域名收斂的策略。

2.TCP連接耗時：t.connectEnd - t.connectStart。

3 首包時間: t.responseStart - t.navigationStart。

優化方法：是否加cdn，數據可否靜態化等。

4.request請求耗時：t.responseEnd - t.requestStart。

優化方法：返回內容是否已經壓縮過，靜態資源是否打包好等。

5.白屏時間。

白屏時間是最影響用戶體驗的，時間越久，用戶等待就越久。

6.解析DOM樹結構的時間：t.domComplete - t.domLoading。

優化方法：檢查dom節點是否過多，dom是否嵌套過深。

7.頁面加載完成的時間：t.loadEventEnd - t.fetchStart。

優化方法：考慮延遲加載，懶加載，部分加載，減少首屏渲染時間。

 

方法

performance.getEntries()：每個資源請求的時間數據。

performance.now() 計算網頁從performance.timing.navigationStart到當前時間的毫秒數。

精確計算某個操作，或某個方法執行的耗時。

var start = performance.now();
dosomething();
var end = performance.now();
var time = end - start;
console.log('耗時' + time + '毫秒。');

或者console.time('aa'),console.timeEnd('aa')計算。

performance.mark()給相應的視點做標記。結合performance.measure()使用也可以算出各個時間段的耗時。

執行下列代碼可以查看頁面加載各個階段的耗時。

function getTimes(){
    var t = performance.timing;
    var timing = {
        domainLookupTime: t.domainLookupEnd - t.domainLookupStart,
        TCPConnectTime: t.connectEnd - t.connectStart,
        ttfb: t.responseStart - t.navigationStart,
        requestTime: t.responseEnd - t.requestStart,
        waitTime: t.domLoading - t.navigationStart,
        renderDomTime: t.domComplete - t.domLoading,
        loadPageTime: t.loadEventEnd - t.fetchStart
    }
    console.log(timing);
}
getTimes();

 

參考資料：

http://javascript.ruanyifeng.com/bom/performance.html

https://developer.mozilla.org/zh-CN/docs/Web/API/Performance

https://www.w3.org/TR/navigation-timing/#sec-window.performance-attribute

http://www.alloyteam.com/2015/09/explore-performance/