摘要：獲取一組當前頁面已經加載的資源對象。為時，表示資源的路徑。超出時，清空所有為的資源數據。為的資源數量超出設置值的時候會觸發該事件。自定義計時接口創建一個保存在資源緩存數據中，可通過等相關接口獲取。返回一個包含對象所有屬性的對象。

performance是html5的新特性之一，通過它，頁面的開發者們可以非常精確的統計到自己頁面的表現情況，從而有針對性的進行優化，提升用戶體驗。

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

返回一個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

返回一個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的資源數據。

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

type，進入頁面的方式：

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

redirectCount ，表示到達此頁面之前經過多少次重定向。

返回一個包含performance對象所有屬性的JSON對象。

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