[轉] Performance — 前端性能監控利器

timing （PerformanceTiming）

從輸入url到用戶可使用頁面的全過程時間統計，會返回一個PerformanceTiming對象，單位均爲毫秒

按觸發順序排列全部屬性：(更詳細標準的解釋請參看：W3C Editor's Draft)
navigationStart:在同一個瀏覽器上下文中，前一個網頁（與當前頁面不必定同域）unload 的時間戳，若是無前一個網頁 unload ，則與 fetchStart 值相等
unloadEventStart:前一個網頁（與當前頁面同域）unload 的時間戳，若是無前一個網頁 unload 或者前一個網頁與當前頁面不一樣域，則值爲 0
unloadEventEnd:和 unloadEventStart 相對應，返回前一個網頁 unload 事件綁定的回調函數執行完畢的時間戳
redirectStart:第一個 HTTP 重定向發生時的時間。有跳轉且是同域名內的重定向纔算，不然值爲 0
redirectEnd:最後一個 HTTP 重定向完成時的時間。有跳轉且是同域名內的重定向纔算，不然值爲 0
fetchStart:瀏覽器準備好使用 HTTP 請求抓取文檔的時間，這發生在檢查本地緩存以前
domainLookupStart:DNS 域名查詢開始的時間，若是使用了本地緩存（即無 DNS 查詢）或持久鏈接，則與 fetchStart 值相等
domainLookupEnd:DNS 域名查詢完成的時間，若是使用了本地緩存（即無 DNS 查詢）或持久鏈接，則與 fetchStart 值相等
connectStart:HTTP（TCP） 開始創建鏈接的時間，若是是持久鏈接，則與 fetchStart 值相等,若是在傳輸層發生了錯誤且從新創建鏈接，則這裏顯示的是新創建的鏈接開始的時間
connectEnd:HTTP（TCP） 完成創建鏈接的時間（完成握手），若是是持久鏈接，則與 fetchStart 值相等,若是在傳輸層發生了錯誤且從新創建鏈接，則這裏顯示的是新創建的鏈接完成的時間

注意:這裏握手結束，包括安全鏈接創建完成、SOCKS 受權經過

secureConnectionStart:HTTPS 鏈接開始的時間，若是不是安全鏈接，則值爲 0
requestStart:HTTP 請求讀取真實文檔開始的時間（完成創建鏈接），包括從本地讀取緩存,鏈接錯誤重連時，這裏顯示的也是新創建鏈接的時間
responseStart:HTTP 開始接收響應的時間（獲取到第一個字節），包括從本地讀取緩存
responseEnd:HTTP 響應所有接收完成的時間（獲取到最後一個字節），包括從本地讀取緩存
domLoading:開始解析渲染 DOM 樹的時間，此時 Document.readyState 變爲 loading，並將拋出 readystatechange 相關事件
domInteractive:完成解析 DOM 樹的時間，Document.readyState 變爲 interactive，並將拋出 readystatechange 相關事件

注意:只是 DOM 樹解析完成，這時候並無開始加載網頁內的資源

domContentLoadedEventStart:DOM 解析完成後，網頁內資源加載開始的時間,文檔發生 DOMContentLoaded事件的時間
domContentLoadedEventEnd:DOM 解析完成後，網頁內資源加載完成的時間（如 JS 腳本加載執行完畢），文檔的DOMContentLoaded 事件的結束時間
domComplete:DOM 樹解析完成，且資源也準備就緒的時間，Document.readyState 變爲 complete，並將拋出 readystatechange 相關事件
loadEventStart:load 事件發送給文檔，也即 load 回調函數開始執行的時間,若是沒有綁定 load 事件，值爲 0
loadEventEnd:load 事件的回調函數執行完畢的時間,若是沒有綁定 load 事件，值爲 0

經常使用計算：
DNS查詢耗時 ：domainLookupEnd - domainLookupStart
TCP連接耗時 ：connectEnd - connectStart
request請求耗時 ：responseEnd - responseStart
解析dom樹耗時 ： domComplete - domInteractive
白屏時間 ：responseStart - navigationStart
domready時間(用戶可操做時間節點) ：domContentLoadedEventEnd - navigationStart
onload時間(總下載時間) ：loadEventEnd - navigationStart

navigation

旨在告訴開發者當前頁面是經過什麼方式導航過來的，只有兩個屬性：type，redirectCount

type:標誌頁面導航類型,值以下表

type常數	枚舉值	描述
TYPE_NAVIGATE	0	普通進入，包括：點擊連接、在地址欄中輸入 URL、表單提交、或者經過除下表中 TYPE_RELOAD 和 TYPE_BACK_FORWARD 的方式初始化腳本。
TYPE_RELOAD	1	經過刷新進入，包括：瀏覽器的刷新按鈕、快捷鍵刷新、location.reload()等方法。
TYPE_BACK_FORWARD	2	經過操做歷史記錄進入，包括：瀏覽器的前進後退按鈕、快捷鍵操做、history.forward()、history.back()、history.go(num)。
TYPE_UNDEFINED	255	其餘非以上類型的方式進入。

 

注意：稍帶個小知識，history.go(url)這種非標準寫法目前主流瀏覽器均不支持，問題可參考http://stackoverflow.com/questions/6277283/history-gourl-issue

redirectCount:表示到達最終頁面前，重定向的次數，可是這個接口有同源策略限制，即僅能檢測同源的重定向。

注意：全部前端模擬的重定向都沒法統計到，由於不屬於HTTP重定向

memory

描述內存多少，是在Chrome中添加的一個非標準屬性。
jsHeapSizeLimit: 內存大小限制
totalJSHeapSize: 可以使用的內存
usedJSHeapSize: JS對象(包括V8引擎內部對象)佔用的內存，不能大於totalJSHeapSize，若是大於，有可能出現了內存泄漏

方法

getEntries()

獲取全部資源請求的時間數據,這個函數返回一個按startTime排序的對象數組，數組成員除了會自動根據所請求資源的變化而改變之外，還能夠用mark(),measure()方法自定義添加，該對象的屬性中除了包含資源加載時間還有如下五個屬性。
name：資源名稱，是資源的絕對路徑或調用mark方法自定義的名稱
startTime:開始時間
duration：加載時間
entryType：資源類型，entryType類型不一樣數組中的對象結構也不一樣！具體見下
initiatorType：誰發起的請求，具體見下

entryType的值:

值	該類型對象	描述
mark	PerformanceMark	經過mark()方法添加到數組中的對象
measure	PerformanceMeasure	經過measure()方法添加到數組中的對象
paint	PerformancePaintTiming	值爲first-paint'首次繪製、'first-contentful-paint'首次內容繪製。
resource	PerformanceResourceTiming	全部資源加載時間，用處最多
navigation	PerformanceNavigationTiming	現除chrome和Opera外均不支持，導航相關信息
frame	PerformanceFrameTiming	現瀏覽器均未支持

也可參見：https://developer.mozilla.org/en-US/docs/Web/API/PerformanceEntry/entryType

initiatorType的值：

發起對象	值	描述
a Element	link/script/img/iframe等	經過標籤形式加載的資源，值是該節點名的小寫形式
a CSS resourc	css	經過css樣式加載的資源，好比background的url方式加載資源
a XMLHttpRequest object	xmlhttprequest/fetch	經過xhr加載的資源
a PerformanceNavigationTiming object	navigation	當對象是PerformanceNavigationTiming時返回

//根據entryType類型返回的不一樣對象 PerformanceMark:{ //經過mark()方法添加的對象 entryType："mark" name：調用mark()方法時自定義的名字 startTime: 作標記的時間 duration：0 } PerformanceMeasure:{ //經過measure()方法添加的對象 entryType："measure" name：調用measure()方法時自定義的名字 startTime: 開始量的時間 duration：標記的兩個量的時間間隔 } PerformancePaintTiming:{ // Chrome 60 新增類型 entryType："paint" name：first-paint" 或 "first-contentful-paint" startTime: 繪製的時間戳 duration： 0 } PerformanceResourceTiming:{ //能夠用來作一個精準的進度條 entryType："resource" name：資源的絕對路徑,即URL startTime: 即將抓取資源的時間， duration： responseEnd - startTime initiatorType：略！/:傲嬌臉 //其餘屬性請參考performance.timing } PerformanceNavigationTiming:{ entryType："navigation" name：本頁路由，即地址欄看到的地址 startTime: 0 duration： loadEventEnd - startTime initiatorType："navigation" //其餘屬性請參考performance.timing }

請注意：

1. 目前經過<audio>，<video>加載資源,initiatorType還沒法返回"audio"和"video"，chrome中只能返回空字符串,firfox返回"other"
2. 若是一個圖片在頁面內既用img引入，又做爲背景圖片引入，那麼initiatorType返回的"img"
3. performance.getEntries(params)這種形式仍出於草案階段，目前仍有不少瀏覽器未支持。可是很是有用，期待早些實現。
4. 使用該方法統計資源信息的時候首先能夠合理利用clearResourceTimings清除已統計過的對象避免重複統計，其次要過濾掉因上報統計數據而產生的對象。

getEntriesByName(name,type[optional])，getEntriesByType(type)

name:想要篩選出的資源名
type:entryType的值中一個
返回值還是一個數組，這個數組至關於getEntries()方法通過所填參數篩選後的一個子集

clearResourceTimings();

該方法無參數無返回值，能夠清楚目前全部entryType爲"resource"的數據，用於寫單頁應用的統計腳本很是有用

mark(name),measure(name, startMark, endMark),clearMarks(),clearMeasures()

用於作標記和清除標記，供用戶自定義統計一些數據，好比某函數運行耗時等

name:自定義的名稱，不要和getEntries()返回的數組中其餘name重複
startMark:做爲開始時間的標記名稱或PerformanceTiming的一個屬性
endMark:做爲結束時間的標記名稱或PerformanceTiming的一個屬性

建立標記：mark(name)；
記錄兩個標記的時間間隔：measure(name, startMark, endMark);
清除指定標記：window.performance.clearMarks(name);
清除全部標記：window.performance.clearMarks();
清除指定記錄間隔數據：window.performance.clearMeasures(name);
清除全部記錄間隔數據：window.performance.clearMeasures();

now()

performance.now()是當前時間與performance.timing.navigationStart的時間差，以微秒（百萬分之一秒）爲單位的時間，與 Date.now()-performance.timing.navigationStart的區別是不受系統程序執行阻塞的影響，所以更加精準。

友情提示

目前主流瀏覽器雖然都已支持Performance對象，可是並不能支持它上面的所有屬性和方法，本文主要依據chrome編寫，所以提到的chrome瀏覽器都是兼容的，其餘具體使用時兼容性請自行測試，目前已測以下：
1.safari瀏覽器(包括mac和ios)只支持navigation,timing,now其他均不支持
2.微信瀏覽器支持timing,navigation屬性，不支持performance.getEntries方法

推薦及參考文章

MDN-Performance
W3C Editor's Draft
初探performance-監控網頁與程序性能
使用性能API快速分析web前端性能