window.performance

在chrome控制檯執行window.performance，會出現下面結果：

 

[javascript] view plain copy

1. 簡單介紹performance中的屬性：  
2. memory：{  
3.     jsHeapSizeLimit: 1136000000 // 內存大小限制  
4.     totalJSHeapSize: 16100000 // 可使用的內存  
5.     usedJSHeapSize: 10000000 //JS 對象佔用的內存，一定小於 totalJSHeapSize  
6. }  
7. navigation:{  
8.     redirectCount:0 // 如果有重定向的話，頁面通過幾次重定向跳轉而來  
9.     type:0 //頁面來源類型：  
10.             // 0   即 TYPE_NAVIGATENEXT 正常進入的頁面（非刷新、非重定向等）  
11.             // 1   即 TYPE_RELOAD       通過 window.location.reload() 刷新的頁面  
12.             // 2   即 TYPE_BACK_FORWARD 通過瀏覽器的前進後退按鈕進入的頁面（歷史記錄）  
13.             // 255 即 TYPE_UNDEFINED    非以上方式進入的頁面  
14. }  
15. timing:{  
16.     connectEnd:1494406626724    // HTTP（TCP） 完成建立連接的時間（完成握手），如果是持久連接，則與 fetchStart 值相等 // 注意如果在傳輸層發生了錯誤且重新建立連接，則這裏顯示的是新建立的連接完成的時間   // 注意這裏握手結束，包括安全連接建立完成、SOCKS 授權通過  
17.     connectStart:1494406626724 // HTTP（TCP） 開始建立連接的時間，如果是持久連接，則與 fetchStart 值相等 // 注意如果在傳輸層發生了錯誤且重新建立連接，則這裏顯示的是新建立的連接開始的時間   
18.     domComplete:1494406628815   // DOM 樹解析完成，且資源也準備就緒的時間，Document.readyState 變爲 complete，並將拋出 readystatechange 相關事件  
19.     domContentLoadedEventEnd:1494406627789  // DOM 解析完成後，網頁內資源加載完成的時間（如 JS 腳本加載執行完畢）  
20.     domContentLoadedEventStart:1494406627789 // DOM 解析完成後，網頁內資源加載開始的時間 // 在 DOMContentLoaded 事件拋出前發生  
21.     domInteractive:1494406627789    // 完成解析 DOM 樹的時間，Document.readyState 變爲 interactive，並將拋出 readystatechange 相關事件  // 注意只是 DOM 樹解析完成，這時候並沒有開始加載網頁內的資源  
22.     domLoading:1494406627313    // 開始解析渲染 DOM 樹的時間，此時 Document.readyState 變爲 loading，並將拋出 readystatechange 相關事件  
23.     domainLookupEnd:1494406626724 // DNS 域名查詢完成的時間，如果使用了本地緩存（即無 DNS 查詢）或持久連接，則與 fetchStart 值相等  
24.     domainLookupStart:1494406626724 // DNS 域名查詢開始的時間，如果使用了本地緩存（即無 DNS 查詢）或持久連接，則與 fetchStart 值相等  
25.     fetchStart:1494406626724    // 瀏覽器準備好使用 HTTP 請求抓取文檔的時間，這發生在檢查本地緩存之前  
26.     loadEventEnd:1494406628824  // load 事件的回調函數執行完畢的時間  
27.     loadEventStart:1494406628816    // load 事件發送給文檔，也即 load 回調函數開始執行的時間 // 注意如果沒有綁定 load 事件，值爲 0  
28.     navigationStart:1494406626724   // 在同一個瀏覽器上下文中，前一個網頁（與當前頁面不一定同域）unload 的時間戳，如果無前一個網頁 unload ，則與 fetchStart 值相等  
29.     redirectEnd:0   // 最後一個 HTTP 重定向完成時的時間。有跳轉且是同域名內部的重定向纔算，否則值爲 0  
30.     redirectStart:0 // 第一個 HTTP 重定向發生時的時間。有跳轉且是同域名內的重定向纔算，否則值爲 0  
31.     requestStart:1494406626757  // HTTP 請求讀取真實文檔開始的時間（完成建立連接），包括從本地讀取緩存 // 連接錯誤重連時，這裏顯示的也是新建立連接的時間  
32.     responseEnd:1494406627304   // HTTP 響應全部接收完成的時間（獲取到最後一個字節），包括從本地讀取緩存  
33.     responseStart:1494406627301 // HTTP 開始接收響應的時間（獲取到第一個字節），包括從本地讀取緩存  
34.     secureConnectionStart:0 // HTTPS 連接開始的時間，如果不是安全連接，則值爲 0  
35.     unloadEventEnd:1494406627304    // 和 unloadEventStart 相對應，返回前一個網頁 unload 事件綁定的回調函數執行完畢的時間戳   
36.     unloadEventStart:1494406627304  // 前一個網頁（與當前頁面同域）unload 的時間戳，如果無前一個網頁 unload 或者前一個網頁與當前頁面不同域，則值爲 0  
37. }  
38.     
39. 實用函數：  
40. 1.計算加載時間  
41. function getPerformanceTiming() {  
42.    
43.     var performance = window.performance;  
44.    
45.     if (!performance) {  
46.         // 當前瀏覽器不支持  
47.         console.log('你的瀏覽器不支持 performance 接口');  
48.         return;  
49.     }  
50.    
51.     var t = performance.timing;  
52.    
53.     var times = {};  
54.    
55.     //【重要】頁面加載完成的時間  
56.     //【原因】這幾乎代表了用戶等待頁面可用的時間  
57.     times.loadPage = t.loadEventEnd - t.navigationStart;  
58.    
59.     //【重要】解析 DOM 樹結構的時間  
60.     //【原因】反省下你的 DOM 樹嵌套是不是太多了！  
61.     times.domReady = t.domComplete - t.responseEnd;  
62.    
63.     //【重要】重定向的時間  
64.     //【原因】拒絕重定向！比如，http://example.com/ 就不該寫成 http://example.com  
65.     times.redirect = t.redirectEnd - t.redirectStart;  
66.    
67.     //【重要】DNS 查詢時間  
68.     //【原因】DNS 預加載做了麼？頁面內是不是使用了太多不同的域名導致域名查詢的時間太長？  
69.     // 可使用 HTML5 Prefetch 預查詢 DNS ，見：[HTML5 prefetch](http://segmentfault.com/a/1190000000633364)             
70.     times.lookupDomain = t.domainLookupEnd - t.domainLookupStart;  
71.    
72.     //【重要】讀取頁面第一個字節的時間  
73.     //【原因】這可以理解爲用戶拿到你的資源佔用的時間，加異地機房了麼，加CDN 處理了麼？加帶寬了麼？加 CPU 運算速度了麼？  
74.     // TTFB 即 Time To First Byte 的意思  
75.     // 維基百科：https://en.wikipedia.org/wiki/Time_To_First_Byte  
76.     times.ttfb = t.responseStart - t.navigationStart;  
77.    
78.     //【重要】內容加載完成的時間  
79.     //【原因】頁面內容經過 gzip 壓縮了麼，靜態資源 css/js 等壓縮了麼？  
80.     times.request = t.responseEnd - t.requestStart;  
81.    
82.     //【重要】執行 onload 回調函數的時間  
83.     //【原因】是否太多不必要的操作都放到 onload 回調函數裏執行了，考慮過延遲加載、按需加載的策略麼？  
84.     times.loadEvent = t.loadEventEnd - t.loadEventStart;  
85.    
86.     // DNS 緩存時間  
87.     times.appcache = t.domainLookupStart - t.fetchStart;  
88.    
89.     // 卸載頁面的時間  
90.     times.unloadEvent = t.unloadEventEnd - t.unloadEventStart;  
91.    
92.     // TCP 建立連接完成握手的時間  
93.     times.connect = t.connectEnd - t.connectStart;  
94.    
95.     return times;  
96.    
97. }  
98.    
99. 2.計算加載時間  
100. function getEntryTiming(entry) {  
101.    
102.     var t = entry;  
103.    
104.     var times = {};  
105.    
106.     // 重定向的時間  
107.     times.redirect = t.redirectEnd - t.redirectStart;  
108.    
109.     // DNS 查詢時間  
110.     times.lookupDomain = t.domainLookupEnd - t.domainLookupStart;  
111.    
112.     // 內容加載完成的時間  
113.     times.request = t.responseEnd - t.requestStart;  
114.    
115.     // TCP 建立連接完成握手的時間  
116.     times.connect = t.connectEnd - t.connectStart;  
117.    
118.     // 掛載 entry 返回  
119.     times.name = entry.name;  
120.    
121.     times.entryType = entry.entryType;  
122.    
123.     times.initiatorType = entry.initiatorType;  
124.    
125.     times.duration = entry.duration;  
126.    
127.     return times;  
128.    
129. }  
130. 例如：  
131. var entries = window.performance.getEntries();//這個函數返回的將是一個數組，包含了頁面中所有的 HTTP 請求  
132. entries.forEach(function (entry) {  
133.     var times = getEntryTiming(entry);  
134.     console.log(times);  
135. });  
136.    
137. 時間說明：  
138. dom開始加載前所有花費時間=重定向時間+域名解析時間+建立連接花費時間+請求花費時間+接收數據花費時間  
139.    
140. pageLoadTime頁面加載時間=域名解析時間+建立連接花費時間+請求花費時間+接收數據花費時間+解析dom花費時間+加載dom花費時間  
141.    
142. allLoadTime頁面完全加載時間=重定向時間+域名解析時間+建立連接花費時間+請求花費時間+接收數據花費時間+解析dom花費時間+加載dom花費時間+執行onload事件花費時間  
143.    
144. resourcesLoadedTime資源加載時間=解析dom花費時間+加載dom花費時間