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

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

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

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

是時(shí)候祭出這張圖了：

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

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事件耗時(shí)：
timing.domContentLoadedEventEnd - timing.domContentLoadedEventStart

DOM加載完成：timing.domComplete - timing.domContentLoadedEventEnd

DOMLoad事件耗時(shí)：timing.loadEventEnd - timing.loadEventStart

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

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

看代碼：

var startTime, endTime;

startTime = window.performance.now();

doSomething();

endTime = window.performance.now();

console.log(endTime - startTime);

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

performance.getEntries

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

var entries = window.performance.getEntries();

返回值如下圖所示：

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

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

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

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

startTime，一個(gè)DOMHighResTimeStamp對象，開始獲取該資源的時(shí)間。

duration，一個(gè)DOMHighResTimeStamp對象，獲取該資源消耗時(shí)長。

performance.getEntriesByName

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

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

performance.getEntriesByType

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

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

performance.setResourceTimingBufferSize

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

window.performance.setResourceTimingBufferSize(maxSize);

performance.onresourcetimingbufferfull

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

performance.clearResourceTimings

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

performance.mark

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

entryType為字符串mark　

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

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

duration為0，因?yàn)?b>mark沒有時(shí)長

window.performance.mark(name)

performance.clearMarks

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

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

entryType為字符串measure　

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

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

duration為兩個(gè)mark之間的時(shí)長

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

performance.clearMeasures

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

返回一個(gè)PerformanceNavigation類型的只讀對象：

type，進(jìn)入頁面的方式：

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

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

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

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