[轉] Performance_js中計算網站性能監控利器

1.Performance方法

Performance提供的方法能夠靈活使用，獲取到頁面加載等標記的耗時狀況。

performance.now()    //返回當前到頁面打開時刻的耗時，精確到千分之一毫秒 performance.mark('worker_installed') //創建測速標記 performance.clearMarks() //清除標記 performance.getEntries() //對網頁發起的全部HTTP請求耗時信息統計後，以數組方式返回 

 

2.Performance屬性

Performance.timing屬性對象提供了瀏覽器從打開網頁到加載完成之間各個節點的耗時數據，包括重定向開始、DNS查詢、瀏覽器響應數據、DOM解析等相關節點。經過組合計算咱們能夠的出咱們所需的各個階段的耗時數據，從而進行分析。

navigationStart：瀏覽器窗口的前一個網頁關閉時發生unload事件時的Unix時間戳，屬於最前的測量時間點。 unloadEventStart：前網頁與當前網頁同屬一個域名時，返回前一個網頁的unload事件發生時的Unix時間戳。 unloadEventEnd：前網頁與當前網頁同屬一個域名時，返回前一個網頁unload事件的回調函數結束時的Unix時間戳。 redirectStart：返回第一個HTTP跳轉開始時的Unix時間戳。 redirectEnd：返回最後一個HTTP跳轉結束時的Unix時間戳。 fetchStart：返回瀏覽器準備使用HTTP請求讀取文檔等資源時的Unix時間戳，在網頁查詢本地緩存以前發生。 domainLookupStart：返回域名查詢開始時的Unix時間戳。若是使用持久鏈接，或者信息是從本地緩存獲取的，則返回值等同於fetchStart屬性的值。 domainLookupEnd：返回域名查詢結束時的Unix毫秒時間戳。若是使用持久鏈接，或者信息是從本地緩存獲取的，則返回值等同於fetchStart屬性的值。 connectStart：返回HTTP請求開始向服務器發送時的Unix毫秒時間戳。若是使用持久鏈接（persistent connection），則返回值等同於fetchStart屬性的值。 connectEnd：返回瀏覽器與服務器之間的鏈接創建時的Unix毫秒時間戳。若是創建的是持久鏈接，則返回值等同於fetchStart屬性的值。鏈接創建指的是全部握手和認證過程所有結束。 secureConnectionStart：返回瀏覽器與服務器開始安全連接的握手時的Unix毫秒時間戳。若是當前網頁不要求安全鏈接，則返回0。 requestStart：返回瀏覽器向服務器發出HTTP請求時（或開始讀取本地緩存時）的Unix毫秒時間戳。 responseStart：返回瀏覽器從服務器收到（或從本地緩存讀取）第一個字節時的Unix毫秒時間戳。 responseEnd：返回瀏覽器從服務器收到（或從本地緩存讀取）最後一個字節時（若是在此以前HTTP鏈接已經關閉，則返回關閉時）的Unix毫秒時間戳。 domLoading：返回當前網頁DOM結構開始解析時（即Document.readyState屬性變爲「loading」、相應的readystatechange事件觸發時）的Unix毫秒時間戳。 domInteractive：返回當前網頁DOM結構結束解析、開始加載內嵌資源時（即Document.readyState屬性變爲「interactive」、相應的readystatechange事件觸發時）的Unix毫秒時間戳。 domContentLoadedEventStart：返回當前網頁DOMContentLoaded事件發生時（即DOM結構解析完畢、全部腳本開始運行時）的Unix毫秒時間戳。 domContentLoadedEventEnd：返回當前網頁全部須要執行的腳本執行完成時的Unix毫秒時間戳。 domComplete：返回當前網頁DOM結構生成時（即Document.readyState屬性變爲「complete」，以及相應的readystatechange事件發生時）的Unix毫秒時間戳。 loadEventStart：返回當前網頁load事件的回調函數開始時的Unix毫秒時間戳。若是該事件尚未發生，返回0。 loadEventEnd：返回當前網頁load事件的回調函數運行結束時的Unix毫秒時間戳。若是該事件尚未發生，返回0。 

Performance.navigation屬性對象提供了瀏覽器的一些行爲信息。

Performance.navigation.type    //經過整數值表示網頁從何加載 //0：網頁經過點擊連接、地址欄輸入、表單提交、腳本操做等方式加載 //1：網頁經過「從新加載」按鈕或者location.reload()方法加載 //2：網頁經過「前進」或「後退」按鈕加載 //255：其餘來源的加載 Performance.navigation.redirectCount //頁面重定向次數 

Performance.memory屬性對象提供了瀏覽器的內存使用狀況。

 

3.實例代碼

// 計算加載時間 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; }

 

4.總結

1.對於網頁的測速上報需求，能夠經過對Performance.timing對象的屬性排列組合，計算出業務須要的測速數據。

2.對於網頁的性能監測需求，能夠經過對Performance.memory對象進行分析，得出內存使用狀況等數據。

3.對於頁面的其餘業務監測需求，能夠經過Performance提供的其餘方法進行靈活使用，計算出業務所需數據。