HTML5 Performance

簡介

performance是html5的新特性之一，經過它，頁面的開發者們能夠很是精確的統計到本身頁面的表現狀況，從而有針對性的進行優化，提高用戶體驗。

下面是小姐姐對performance相關API的學習總結，一塊兒上車吧～

performance.timing

返回一個PerformanceTiming對象，用來獲取完整的頁面加載信息。

是時候祭出這張圖了：

咱們會比較關注的幾個時間段及其耗時的計算方法以下：

• DNS解析：timing.domainLookupEnd - timing.domainLookupStart
• 創建鏈接：timing.connectEnd - timing.connectStart
• 發送請求：timing.responseStart - timing.requestStart
• 接收請求：timing.responseEnd - timing.responseStart
• 解析DOM樹：timing.domInteractive - timing.domLoading
• 頁面加載完成：timing.domContentLoadedEventStart - timing.domInteractive
• DOMContentLoaded事件耗時：
  timing.domContentLoadedEventEnd - timing.domContentLoadedEventStart
• DOM加載完成：timing.domComplete - timing.domContentLoadedEventEnd
• DOMLoad事件耗時：timing.loadEventEnd - timing.loadEventStart

performance.now

返回一個DOMHighResTimeStamp對象，獲取從timing.navigationStart開始到調用該方法的時間，精確到千分之五毫秒（5微秒）。

下面是該方法的使用場景之一：經過計算代碼塊的起始位置以及結束位置performance.now()的差值，來獲取一個比較精確的代碼執行時間。

看代碼：

var startTime, endTime;

startTime = window.performance.now();

doSomething();

endTime = window.performance.now();

console.log(endTime - startTime);

資源性能數據

performance提供若干API容許咱們對頁面中加載的資源進行性能分析。

performance.getEntries

獲取一組當前頁面已經加載的資源PerformanceEntry對象。接收一個可選的參數options進行過濾，options支持的屬性有name，entryType，initiatorType。

var entries = window.performance.getEntries();

返回值以下圖所示：

• name，根據entryType不一樣，該值有不一樣含義。entryType爲resource時，name表示資源的路徑。
• entryType，取值有：resource，mark，measure等，詳情戳這裏

• initiatorType，初始化該資源的資源類型：

  - 初始化資源是一個`Element`時，取值爲節點的`localName`，經過`element.localName`獲取。
  - 初始化資源是一個`css`文件時，取值爲`css`。
  - 初始化資源是一個`XMLHttpRequest`時，取值爲`xmlhttprequest`。
  - 初始化資源是一個`PerformanceNavigationTiming`對象時，取值爲空字符串。

• startTime，一個DOMHighResTimeStamp對象，開始獲取該資源的時間。
• duration，一個DOMHighResTimeStamp對象，獲取該資源消耗時長。

performance.getEntriesByName

根據參數name，type獲取一組當前頁面已經加載的資源數據。name的取值對應到資源數據中的name字段，type取值對應到資源數據中的entryType字段。

var entries = window.performance.getEntriesByName(name, type);

performance.getEntriesByType

根據參數type獲取一組當前頁面已經加載的資源數據。type取值對應到資源數據中的entryType字段。

var entries = window.performance.getEntriesByType(type);

performance.setResourceTimingBufferSize

設置當前頁面可緩存的最大資源數據個數，entryType爲resource的資源數據個數。超出時，清空全部entryType爲resource的資源數據。

window.performance.setResourceTimingBufferSize(maxSize);

performance.onresourcetimingbufferfull

entryType爲resource的資源數量超出設置值的時候會觸發該事件。

performance.clearResourceTimings

移除緩存中全部entryType爲resource的資源數據。

自定義計時接口

performance.mark

建立一個DOMHighResTimeStamp保存在資源緩存數據中，可經過performance.getEntries()等相關接口獲取。

• entryType爲字符串mark　
• name爲建立時設置的值
• startTime爲調用mark時的時間
• duration爲0，由於mark沒有時長

window.performance.mark(name)

performance.clearMarks

移除緩存中全部entryType爲mark的資源數據。

performance.measure
計算兩個mark之間的時長，建立一個DOMHighResTimeStamp保存在資源緩存數據中，可經過performance.getEntries()等相關接口獲取。

• entryType爲字符串measure　
• name爲建立時設置的值
• startTime爲調用measure時的時間
• duration爲兩個mark之間的時長

window.performance.measure(name, startMark, endMark);

performance.clearMeasures

移除緩存中全部entryType爲measure的資源數據。

performance.navigation

返回一個PerformanceNavigation類型的只讀對象：

• type，進入頁面的方式：

  - `TYPE_NAVIGATENEXT(0)`，經過點擊連接，書籤，在瀏覽器地址欄輸入地址，或者經過腳本跳轉
  - `TYPE_RELOAD(1)`，經過點擊頁面內的刷新按鈕，或者經過`Location.reload()`方法
  - `TYPE_BACK_FORWARD(2)`，經過點擊頁面內的前進後退按鈕
  - `TYPE_RESERVED(255)`，其餘方式

• redirectCount ，表示到達此頁面以前通過多少次重定向。

performance.toJSON

返回一個包含performance對象全部屬性的JSON對象。

THE END

以上就是所有內容啦，有意見或者建議歡迎積極留言哦，筆芯～