web計時機制

標籤：軟體   blog   全面   img   complete   pre   memory   絕對路徑   pst   

前面的話

　　頁面效能一直都是Web開發人員比較關注的領域。但在實際應用中，度量頁面效能的指標，是javascript的Date對象。Web Timing API改變了這個局面，讓開發人員通過javascript就能使用瀏覽器內部的度量結果，給出了頁面載入和渲染過程的很多資訊，對效能最佳化非常有價值。本文將詳細介紹web Timing API——performance對象

 

簡述

　　Web計時機制的核心是window.performance對象。對頁面的所有度量資訊，包括那些規範中已經定義的和將來才能確定的，都包含在這個對象裡面。performance對象包括navigation和timing對象，以及chrome擴充的memory對象，還包括getEntries()和now()兩個方法

　　值得高興的是，低版本IE也支援performance對象

memory

　　memory屬性是chrome擴充的對象，只有chrome瀏覽器支援，包含以下三個屬性：

　　jsHeapSizeLimit表示記憶體大小限制

　　totalJSHeapSize表示可使用的記憶體

　　usedJSHeapSize表示javascript對象佔用的記憶體

/*jsHeapSizeLimit: 793000000totalJSHeapSize: 10000000usedJSHeapSize: 10000000 */console.log(performance.memory);

 

navigation

　　performance.navigation屬性是一個對象，包含著與頁面導航有關的redirectCount和type這兩個屬性

　　其中redirectCount表示頁面載入前的重新導向次數；而type是一個數值常量，表示剛剛發生的導航類型，type有以下取值

performance.navigation.TYPE_NAVTGATE(0):頁面第一次載入performance.navigation.TYPE_RELOAD(1):頁面重載過performance.navigation.TYPE_BACK_FORWARD(2):頁面是通過“後退”或“前進”按鈕開啟的

console.log(window.performance.navigation.redirectCount);//0console.log(window.performance.navigation.type);//1

 

timing

　　performance.timing屬性也是一個對象，但這個對象的屬性都是時間戳記，不同的事件會產生不同的時間值

　　顯示了一個請求發出的整個過程中，各種環節的時間順序

　　下面按照時間順序對timing對象的各個屬性進行說明 

　　navigationStart:開始導航到當前頁面的時間，即在地址欄輸入地址後按下斷行符號時的時間

var navigationStart = performance.timing.navigationStart;//1488984540668console.log(navigationStart);//Wed Mar 08 2017 22:49:44 GMT+0800 (中國標準時間)console.log(new Date(new Date(navigationStart)));

　　redirectStart:到當前頁面的重新導向開始的時間。但只有在重新導向的頁面來自同一個域時這個屬性才會有值；否則，值為0
　　redirectEnd:到當前頁面的重新導向結束的時間。但只有在重新導向的頁面來自同一個域時這個屬性才會有值；否則，值為0

console.log(performance.timing.redirectStart);//0console.log(performance.timing.redirectEnd);//0

　　fetchStart:開始通過HTTP GET取得頁面的時間

console.log(performance.timing.fetchStart);//1488984540668

　　domainLookupStart:開始査詢當前頁面DNS的時間，如果使用了本機快取或持久串連，則與fetchStart值相等
　　domainLookupEnd:査詢當前頁面DNS結束的時間，如果使用了本機快取或持久串連，則與fetchStart值相等

console.log(performance.timing.domainLookupStart);//1488984540670console.log(performance.timing.domainLookupEnd);//1488984540671

　　connectStart:瀏覽器嘗試串連伺服器的時間
　　secureConnectionStart:瀏覽器嘗試以SSL方式串連伺服器的時間。不使用SSL方式串連時，這個屬性的值為0 
　　connectEnd:瀏覽器成功串連到伺服器的時間

console.log(performance.timing.connectStart);//1488984540671console.log(performance.timing.secureConnectionStart);//0console.log(performance.timing.connectEnd);//1488984540719

　　requestStart:瀏覽器開始請求頁面的時間
　　responseStart:瀏覽器接收到頁面第一位元組的時間
　　responseEnd:瀏覽器接收到頁面所有內容的時間

console.log(performance.timing.requestStart);//1488984540720console.log(performance.timing.responseStart);//1488984540901console.log(performance.timing.responseEnd);//1488984540902

　　unloadEventStart:前一個頁面的unload事件開始的時間。但只有在前一個頁面與當前頁面來自同一個域時這個屬性才會有值；否則，值為0
　　unloadEventEnd:前一個頁面的unload事件結束的時間。但只有在前一個頁面與當前頁面來自同一個域時這個屬性才會有值；否則，值為0

console.log(performance.timing.unloadEventStart);//1488984540902console.log(performance.timing.unloadEventEnd);//1488984540903

　　domLoading:document.readyState變為"loading"的時間，即開始解析DOM樹的時間
　　domInteractive:document.readyState變為"interactive"的時間，即完成完成解析DOM樹的時間
　　domContentLoadedEventStart:發生DOMContentloaded事件的時間，即開始載入網頁內資源的時間
　　domContentLoadedEventEnd:DOMContentLoaded事件已經發生且執行完所有事件處理常式的時間，網頁內資源載入完成的時間
　　domComplete:document.readyState變為"complete"的時間，即DOM樹解析完成、網頁內資源準備就緒的時間

console.log(performance.timing.domLoading);//1488984540905console.log(performance.timing.domInteractive);//1488984540932console.log(performance.timing.domContentLoadedEventStart);//1488984540932console.log(performance.timing.domContentLoadedEventEnd);//1488984540932console.log(performance.timing.domComplete);//1488984540932

　　loadEventStart:發生load事件的時間，也就是load回呼函數開始執行的時間 
　　loadEventEnd:load事件已經發生且執行完所有事件處理常式的時間

console.log(performance.timing.loadEventStart);//1488984540933console.log(performance.timing.loadEventEnd);//1488984540933

　　[注意]在實際情況下，通過performance.timing屬性可以找到domInteractive、domContentLoadedEventStart、domContentLoadedEventEnd、domComplete、loadEventStart和loadEventEnd這6個值。但是在單獨擷取的情況下，這6個值都為0

/*connectEnd:1488989686331connectStart:1488989686330domComplete:1488989686395domContentLoadedEventEnd:1488989686395domContentLoadedEventStart:1488989686393domInteractive:1488989686393domLoading:1488989686336domainLookupEnd:1488989686330domainLookupStart:1488989686330fetchStart:1488989686328loadEventEnd:1488989686395loadEventStart:1488989686395navigationStart:1488989686328redirectEnd:0redirectStart:0requestStart:1488989686331responseEnd:1488989686333responseStart:1488989686332secureConnectionStart:0unloadEventEnd:1488989686333unloadEventStart:1488989686333*/console.log(performance.timing);

/*navigationStart:1488989686328unloadEventStart:1488989686333unloadEventEnd:1488989686333redirectStart:0redirectEnd:0fetchStart:1488989686328domainLookupStart:1488989686330domainLookupEnd:1488989686330connectStart:1488989686330connectEnd:1488989686331secureConnectionStart:0requestStart:1488989686331responseStart:1488989686332responseEnd:1488989686333domLoading:1488989686336domInteractive:0domContentLoadedEventStart:0domContentLoadedEventEnd:0domComplete:0loadEventStart:0loadEventEnd:0 */var timing = performance.timing;for(var value in timing){    console.log(value + ‘:‘+timing[value]);}

 

getEntries()

　　getEntries()方法將返回一個數組，包含了頁面中所有的HTTP資源請求

　　[注意]IE8-瀏覽器不支援

　　以下面的頁面為例，可知頁面有jquery一個資源的請求

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title></head><body><script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script><script>console.log(performance.getEntries());</script></body></html>

　　結果如所示，由於只有一個資源，所以該資源處於performance.getEntries()[0]中

　　其中，duration表示載入時間；name表示資源的絕對路徑；entryType表示資源類型；initiatorType表示發起請求的標籤

 

now()

　　now()方法返回從頁面初始化到調用該方法時的毫秒數

　　[注意]IE9-瀏覽器不支援

　　performance.now()與Date.now()不同的是，返回了以微秒為單位的時間，更加精準

　　並且與Date.now()會受系統程式執行阻塞的影響不同，performance.now()的時間是以恒定速率遞增的，不受系統時間的影響(系統時間可被人為或軟體調整)

　　Date.now()輸出的是UNIX時間，即距離1970年1月1日0點的時間，而performance.now()輸出的是相對於performance.timing.navigationStart(頁面初始化)的時間

var t0 = window.performance.now();doSomething();var t1 = window.performance.now();console.log("doSomething函數執行了" + (t1 - t0) + "毫秒.")

 

效能指標

　　通過timing屬性的這些時間值，就可以全面瞭解頁面在被載入到瀏覽器的過程中都經曆了哪些階段，而哪些階段可能是影響效能的瓶頸

【重新導向時間】

times.redirect = timing.redirectEnd - timing.redirectStart;console.log(times.redirect);//0

【DNS查詢時間】

times.lookupDomain = timing.domainLookupEnd - timing.domainLookupStart;console.log(times.lookupDomain);//1

【TCP握手時間】

times.connect = timing.connectEnd - timing.connectStart;console.log(times.connect);//48

【HTTP回應時間】

　　通過瀏覽器發出HTTP請求，到瀏覽器接受完HTTP響應的時間

times.request = timing.responseEnd - timing.requestStart;console.log(times.request);//182

 　　最終，效能指標對象times表示如下

var timing = performance.timing;var times = {    redirect:timing.redirectEnd - timing.redirectStart,    lookupDomain:timing.domainLookupEnd - timing.domainLookupStart,    connect:timing.connectEnd - timing.connectStart,    request:timing.responseEnd - timing.requestStart};

web計時機制