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

performance是html5的新特性之一，通過它，頁面的開發(fā)者們可以非常精確的統(tǒng)計到自己頁面的表現(xiàn)情況，從而有針對性的進行優(yōu)化，提升用戶體驗。

下面是小姐姐對performance相關(guān)API的學習總結(jié)，一起上車吧～

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

是時候祭出這張圖了：

我們會比較關(guān)注的幾個時間段及其耗時的計算方法如下：

DNS解析：timing.domainLookupEnd - timing.domainLookupStart

建立連接：timing.connectEnd - timing.connectStart

發(fā)送請求：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開始到調(diào)用該方法的時間，精確到千分之五毫秒（5微秒）。

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

看代碼：

var startTime, endTime;

startTime = window.performance.now();

doSomething();

endTime = window.performance.now();

console.log(endTime - startTime);

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

performance.getEntries

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

var entries = window.performance.getEntries();

返回值如下圖所示：

name，根據(jù)entryType不同，該值有不同含義。entryType為resource時，name表示資源的路徑。

entryType，取值有：resource，mark，measure等，詳情戳這里

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

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

startTime，一個DOMHighResTimeStamp對象，開始獲取該資源的時間。

duration，一個DOMHighResTimeStamp對象，獲取該資源消耗時長。

performance.getEntriesByName

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

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

performance.getEntriesByType

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

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

performance.setResourceTimingBufferSize

設(shè)置當前頁面可緩存的最大資源數(shù)據(jù)個數(shù)，entryType為resource的資源數(shù)據(jù)個數(shù)。超出時，清空所有entryType為resource的資源數(shù)據(jù)。

window.performance.setResourceTimingBufferSize(maxSize);

performance.onresourcetimingbufferfull

entryType為resource的資源數(shù)量超出設(shè)置值的時候會觸發(fā)該事件。

performance.clearResourceTimings

移除緩存中所有entryType為resource的資源數(shù)據(jù)。

performance.mark

創(chuàng)建一個DOMHighResTimeStamp保存在資源緩存數(shù)據(jù)中，可通過performance.getEntries()等相關(guān)接口獲取。

entryType為字符串mark　

name為創(chuàng)建時設(shè)置的值

startTime為調(diào)用mark時的時間

duration為0，因為mark沒有時長

window.performance.mark(name)

performance.clearMarks

移除緩存中所有entryType為mark的資源數(shù)據(jù)。

performance.measure
計算兩個mark之間的時長，創(chuàng)建一個DOMHighResTimeStamp保存在資源緩存數(shù)據(jù)中，可通過performance.getEntries()等相關(guān)接口獲取。

entryType為字符串measure　

name為創(chuàng)建時設(shè)置的值

startTime為調(diào)用measure時的時間

duration為兩個mark之間的時長

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

performance.clearMeasures

移除緩存中所有entryType為measure的資源數(shù)據(jù)。

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

type，進入頁面的方式：

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

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

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

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