前端性能監控-window.performance.timing篇

最近發現瀏覽器內置對象里有個好東西，window.performance。這里面包含着瀏覽器性能相關的各種數據，然后其中的timing屬性，就是所有階段的用時統計，從這一點我們就可以簡單的從瀏覽器運行時間上進行分析。

function getsec(time) {
      return time / 1000 + 's'
}
window.onload = function () {
      var per = window.performance.timing;
      console.log('DNS查詢耗時' + getsec(per.domainLookupEnd - per.domainLookupStart))
      console.log('TCP鏈接耗時' + getsec(per.connectEnd - per.connectStart))
      console.log('request請求響應耗時' + getsec(per.responseEnd - per.responseStart))
      console.log('dom渲染耗時' + getsec(per.domComplete - per.domInteractive))
     //  console.log('白屏時間' + getsec(firstPaint - pageStartTime))
      console.log('domready可操作時間' + getsec(per.domContentLoadedEventEnd - per.fetchStart))
    }

運行結果如下

 

 通過這種時間分析則可以看出當前頁面的時間是花在什么地方，對我們做性能優化就有一個方向性的指導作用。