性能分析的一些數字指標

頁面性能參數

W3C出了一些API,var time = performance.timing
在前端頁面window.onload中console.log(time)後會獲得一個數組,數組中包含了如下列表中的值.前端

clipboard.png

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

資源加載性能

Resource Timing瀏覽器獲取網頁時,會對網頁中每個靜態資源(腳本文件、樣式表、圖片文件等等)發出一個HTTP請求。Resource Timing能夠獲取到單個靜態資源從開始發出請求到獲取響應之間各個階段的Timing。用法以下:segmentfault

var resourcesObj = performance.getEntries();

Resource Timing返回的是一個對象數組,數組的每個項都是一個對象,這個對象中包含了當前靜態資源的加載Timing,以下圖:
clipboard.png數組

整個加載時間爲duration參數.
以上全部值的參數都爲毫秒.瀏覽器

此文章參考此連接dom

相關文章
相關標籤/搜索