Performance API 是前端性能監(jiān)控中常用的API，下面對(duì)Performance API中的Performance Entry相關(guān)要點(diǎn)做一個(gè)梳理介紹
Performance API
Performance API最主要的作用就是支持應(yīng)用程序中客戶端的延時(shí)測(cè)量。
那么Performance API的時(shí)間測(cè)量與Date對(duì)象的時(shí)間定義有什么區(qū)別呢？
- 精度不同
- Performance API 是高采樣率的，因?yàn)槠渚_度可達(dá)千分之一毫秒（受硬件或軟件限制）
- Date 對(duì)象則基于 Unix Time Stamp，即自1970年1月1日（UTC）起經(jīng)過(guò)的毫秒數(shù)
- Performance API 支持單調(diào)時(shí)鐘
- 使用 Date.now() 的差值并非絕對(duì)精確，因?yàn)橛?jì)算時(shí)間時(shí)受系統(tǒng)限制（可能阻塞），有可能會(huì)出現(xiàn) Time1 - Time2 是負(fù)值的情況
- performance.now() 方法返回一個(gè)DOMHighResTimeStamp,其時(shí)間是以恒定速率遞增的，不受系統(tǒng)時(shí)間的影響（系統(tǒng)時(shí)間可被人為或軟件調(diào)整）
Performance Entry
介紹
- PerformanceEntry 對(duì)象代表了 performance 時(shí)間列表中的單個(gè) metric 數(shù)據(jù).
- 每一個(gè)性能條目都可以在應(yīng)用運(yùn)行過(guò)程中通過(guò)手動(dòng)構(gòu)建 mark （en-US）或者 measure （en-US）（例如調(diào)用mark()方法）生成。
- Performance entries 在資源加載的時(shí)候，也會(huì)被動(dòng)生成（例如圖片、script、css等資源加載）
- Entries初始150個(gè)限制，可通過(guò)以下兩個(gè)API修改
- 修改上限：setResourceTimingBufferSize(your_number);
- 清除當(dāng)前保存的Entries：clearResourceTimings()
屬性
- resource entry 結(jié)構(gòu)如下
image.png
connectEnd：連接結(jié)束時(shí)間
connectStart：連接開(kāi)始時(shí)間
decodedBodySize：解碼的主體大小
domComplete：dom 渲染完成時(shí)間
domContentLoadedEventEnd：dom 內(nèi)容加載事件結(jié)束時(shí)間
domContentLoadedEventStart：dom 內(nèi)容加載事件開(kāi)始時(shí)間
domInteractive：dom 交互時(shí)間
domainLookupEnd：域查找結(jié)束時(shí)間
domainLookupStart：域查找開(kāi)始時(shí)間
duration：事件耗時(shí)
encodedBodySize：編碼主體大小
entryType：資源輸入類型
fetchStart：獲取資源開(kāi)始時(shí)間
initiatorType：發(fā)起人類型
loadEventEnd：加載事件結(jié)束時(shí)間
loadEventStart：加載事件開(kāi)始時(shí)間
name：這里一般就是當(dāng)前請(qǐng)求的 url 的地址
nextHopProtocol：下一個(gè)跳轉(zhuǎn)協(xié)議
redirectCount：重定向次數(shù)
redirectEnd：重定向開(kāi)始時(shí)間，如果沒(méi)有重定向，值為0
redirectStart：重定向結(jié)束時(shí)間，如果沒(méi)有重定向，值為0
requestStart：請(qǐng)求開(kāi)始時(shí)間
responseEnd：響應(yīng)結(jié)束時(shí)間
responseStart：響應(yīng)開(kāi)始時(shí)間
secureConnectionStart：安全連接開(kāi)始時(shí)間
serverTiming：服務(wù)器時(shí)間
startTime：開(kāi)始時(shí)間
transferSize：傳遞大小
type：該事件的類型
unloadEventEnd：卸載事件結(jié)束時(shí)間
unloadEventStart：卸載事件開(kāi)始時(shí)間
workerStart：worker 開(kāi)始時(shí)間
獲取Entry的方法
performance.getEntries()
瀏覽器獲取網(wǎng)頁(yè)時(shí)，會(huì)對(duì)網(wǎng)頁(yè)中每一個(gè)對(duì)象（腳本文件、樣式表、圖片文件等等）發(fā)出一個(gè)HTTP請(qǐng)求。performance.getEntries方法以數(shù)組形式，返回這些請(qǐng)求的時(shí)間統(tǒng)計(jì)信息，有多少個(gè)請(qǐng)求，返回?cái)?shù)組就會(huì)有多少個(gè)成員。
-
transferSize: 資源大小，支持瀏覽器：Chrome 53 以上，可能出現(xiàn)為0的情況
- 原因：如果從本地緩存中獲取資源，或者它是跨域資源，則此屬性返回零。
- 啟用CORS時(shí)，除非服務(wù)器的訪問(wèn)策略允許共享這些值，否則許多這些值將返回零。這要求服務(wù)器提供資源以發(fā)送Timing-Allow-Origin HTTP響應(yīng)標(biāo)頭，并提供一個(gè)值，該值指定允許獲得受限時(shí)間戳值的一個(gè)或多個(gè)起源。
- 從網(wǎng)頁(yè)本身以外的其他域加載資源時(shí)，默認(rèn)情況下返回為0的屬性：redirectStart，redirectEnd，domainLookupStart，domainLookupEnd，connectStart，connectEnd，secureConnectionStart，requestStart和responseStart。
performance.getEntriesByType(type)
- getEntriesByType() 方法返回給定類型的 PerformanceEntry 列表
- performance.getEntriesByType("resource")方法為每個(gè)請(qǐng)求的資源獲取一個(gè)資源定時(shí)對(duì)象數(shù)組
- entryType
- "mark" PerformanceMark User Timing
- "measure" PerformanceMeasure User Timing
- "navigation" PerformanceNavigationTiming Navigation Timing 2 work in progress
- "frame" PerformanceFrameTiming Frame Timing work in progress
- "resource" PerformanceResourceTiming Resource Timing work in progress
- "server" PerformanceServerTiming Server Timing work in progress
performance.getEntriesByName(name, type)
- getEntriesByName()方法返回一個(gè)給定名稱和name和type屬性的PerformanceEntry對(duì)象數(shù)組
標(biāo)記與測(cè)算
performance.mark(name)
根據(jù)給出 name 值，在瀏覽器的性能輸入緩沖區(qū)中創(chuàng)建一個(gè)相關(guān)的時(shí)間戳
performance.measure(name, startMark, endMark)
這里接收三個(gè)參數(shù)：
name：測(cè)量的名字
startMark：測(cè)量的開(kāi)始標(biāo)志名字（也可以是 PerformanceTiming 屬性的名稱）
endMark：測(cè)量的結(jié)束標(biāo)志名字（也可以是 PerformanceTiming 屬性的名稱）
一般來(lái)說(shuō)，performance.mark, performance.measure組合使用，例子如下
// 標(biāo)記開(kāi)始
performance.mark("myTimestart");
// ...
dosometing();
// 標(biāo)記結(jié)束
performance.mark("myTimeend");
// 標(biāo)記開(kāi)始點(diǎn)和結(jié)束點(diǎn)之間的時(shí)間戳
performance.measure(
"myTime",
"myTimestart",
"myTimeend"
);
// 獲取所有名稱為myTime的measures
var measures = performance.getEntriesByName("myTime");
var measure = measures[0];
console.log("myTime milliseconds:", measure.duration);
// 清除標(biāo)記
performance.clearMarks();
performance.clearMeasures();
