網頁性能檢測-performance

上一篇講到看懂Chrome瀏覽器自帶的Performance性能監控,但不少時候咱們但願的是主動收集客戶端的數據，瀏覽器的調試工具就有些沒法知足了。

推薦使用window.performance對象。

1、performance是什麼

容許網頁訪問某些函數來測量網頁和Web應用程序的性能，包括 Navigation Timing API和高分辨率時間數據。

來源：MDN

實質上來講performance對象就是專門用於性能監測的對象，內置了幾乎全部經常使用前端須要的性能參數監控。

注意：performance對象的全部API，都是隻讀的。

例如：

• 自輸入網址回車開始到某一特定時間
• 解析dom樹耗時
• 白屏時間
• domready時間
• onload時間
• 重定向耗時
• request請求耗時

還有：

• 當前網頁的所有對象統計信息
• 用戶行爲信息

2、performance的兼容性

performance的監控前端性能推出，讓幾乎全部瀏覽器都舒服了一把。 (IE9如下除外) 而且各大瀏覽器都在盡力的作向下兼容。

不能盲目樂觀：

1. performance的內置方法的返回結果各內核瀏覽器不一致，例如：獲取全部全部http請求列表時，Firefox返回結果包括失敗和成功所有內容，Chrome瀏覽器則只返回成功請求。

2. performance不少內置API是基於瀏覽器實現，所以在移動端或客戶端上有所限制。(如getEntries()等)

3、performance的API

performance的API比較多，但有幾個尤其實用。

1. performance.now()方法

performance.now()返回performance.navigationStart至當前的毫秒數。 performance.navigationStart是下文將介紹到的能夠說是瀏覽器訪問最初的時間測量點。

值得注意的兩點：

• 測量初始點是瀏覽器訪問最初測量點，或者理解爲在地址欄輸入URL後按回車的那一瞬間。
• 返回值是毫秒數，但帶有精準的多位小數。

用performance.now()檢測for循環的執行時間(毫秒)

var st = performance.now();
    for (var o = 0; o < 10000; o ++)  console.log(o)
    var end = performance.now();

    console.log(`for時間${end - st}`); // for時間1155.9950000373647
複製代碼

2. performance.navigation屬性

performance.navigation負責紀錄用戶行爲信息，只有兩個屬性。

console.log(performance.navigation);
// PerformanceNavigation {type: 1, redirectCount: 0}
複製代碼

• type：表示網頁的加載來源，可能有4種狀況

  • 0：網頁經過點擊連接、地址欄輸入、表單提交、腳本操做等方式加載，至關於常數
  • 1：網頁經過「從新加載」按鈕或者location.reload()方法加載
  • 2：網頁經過「前進」或「後退」按鈕加載
  • 255：任何其餘來源的加載

• redirectCount：表示當前網頁通過了多少次重定向跳轉。

3. performance.timing對象

做爲performance最爲重要的屬性之一，timing內包含了幾乎全部時間節點。(附1)

整理的經常使用時間點計算以下：直接複製粘貼取用。

window.onload = function() {
  var timing  = performance.timing;
  console.log('準備新頁面時間耗時: ' + timing.fetchStart - timing.navigationStart);
  console.log('redirect 重定向耗時: ' + timing.redirectEnd  - timing.redirectStart);
  console.log('Appcache 耗時: ' + timing.domainLookupStart  - timing.fetchStart);
  console.log('unload 前文檔耗時: ' + timing.unloadEventEnd - timing.unloadEventStart);
  console.log('DNS 查詢耗時: ' + timing.domainLookupEnd - timing.domainLookupStart);
  console.log('TCP鏈接耗時: ' + timing.connectEnd - timing.connectStart);
  console.log('request請求耗時: ' + timing.responseEnd - timing.requestStart);
  console.log('白屏時間: ' + timing.responseStart - timing.navigationStart);
  console.log('請求完畢至DOM加載: ' + timing.domInteractive - timing.responseEnd);
  console.log('解釋dom樹耗時: ' + timing.domComplete - timing.domInteractive);
  console.log('從開始至load總耗時: ' + timing.loadEventEnd - timing.navigationStart);
}
複製代碼

值得注意的一點：放在window.onload中執行，最主要的緣由是渲染完成後能拿到大部分timing屬性，也能夠放入定時器中執行。

4. performance.mark(markName)方法

標記在自定義的時間點，對應的方法是peformance.clearMarks(markName) / performance.clearMarks(); 實測兼容性並非很理想。。。（或者可能我用的不對）

5. performance.memory屬性

performance.memory用於顯示當前的內存佔用狀況；

console.log(performance.memory);
/* MemoryInfo {
  totalJSHeapSize: 11735319,
  usedJSHeapSize: 9259919,
  jsHeapSizeLimit: 2197815296
} */
複製代碼

• usedJSHeapSize表示：JS 對象（包括V8引擎內部對象）佔用的內存數
• totalJSHeapSize表示：可以使用的內存
• jsHeapSizeLimit表示：內存大小限制

一般，usedJSHeapSize不能大於totalJSHeapSize，若是大於，有可能出現了內存泄漏。

6. performance.getEntries()方法

瀏覽器獲取網頁時，會對網頁中每個對象（腳本文件、樣式表、圖片文件等等）發出一個HTTP請求。performance.getEntries方法以數組形式，返回一個PerformanceEntry列表，這些請求的時間統計信息，有多少個請求，返回數組就會有多少個成員。

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	現瀏覽器均未支持

也可參見：MDN

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時返回

1. 只能在瀏覽器中使用 2. 該方法返回的數組第一項是HTML頁面信息

4、如何將performance的信息傳遞出去

1. sendBeacon方法
2. 動態<img>標籤
3. web wroker

這些都是後話啦。。。

---

引用：

1. developer.mozilla.org/zh-CN/docs/…
2. developer.mozilla.org/en-US/docs/…
3. javascript.ruanyifeng.com/bom/perform…
4. www.cnblogs.com/bldxh/p/685…

---

附1：

屬性名	含義
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