Performance API 是前端性能監(jiān)控中常用的API月帝，下面對Performance API中的Performance Entry相關(guān)要點做一個梳理介紹
Performance API
Performance API最主要的作用就是支持應(yīng)用程序中客戶端的延時測量。
那么Performance API的時間測量與Date對象的時間定義有什么區(qū)別呢？
- 精度不同
- Performance API 是高采樣率的，因為其精確度可達(dá)千分之一毫秒（受硬件或軟件限制）
- Date 對象則基于 Unix Time Stamp，即自1970年1月1日（UTC）起經(jīng)過的毫秒數(shù)
- Performance API 支持單調(diào)時鐘
- 使用 Date.now() 的差值并非絕對精確，因為計算時間時受系統(tǒng)限制（可能阻塞）茧痕，有可能會出現(xiàn) Time1 - Time2 是負(fù)值的情況
- performance.now() 方法返回一個DOMHighResTimeStamp,其時間是以恒定速率遞增的，不受系統(tǒng)時間的影響（系統(tǒng)時間可被人為或軟件調(diào)整）
Performance Entry
介紹
- PerformanceEntry 對象代表了 performance 時間列表中的單個 metric 數(shù)據(jù).
- 每一個性能條目都可以在應(yīng)用運行過程中通過手動構(gòu)建 mark （en-US）或者 measure （en-US）（例如調(diào)用mark()方法）生成恼除。
- Performance entries 在資源加載的時候踪旷，也會被動生成（例如圖片、script豁辉、css等資源加載）
- Entries初始150個限制令野，可通過以下兩個API修改
- 修改上限：setResourceTimingBufferSize(your_number);
- 清除當(dāng)前保存的Entries：clearResourceTimings()
屬性
- resource entry 結(jié)構(gòu)如下
image.png
connectEnd：連接結(jié)束時間
connectStart：連接開始時間
decodedBodySize：解碼的主體大小
domComplete：dom 渲染完成時間
domContentLoadedEventEnd：dom 內(nèi)容加載事件結(jié)束時間
domContentLoadedEventStart：dom 內(nèi)容加載事件開始時間
domInteractive：dom 交互時間
domainLookupEnd：域查找結(jié)束時間
domainLookupStart：域查找開始時間
duration：事件耗時
encodedBodySize：編碼主體大小
entryType：資源輸入類型
fetchStart：獲取資源開始時間
initiatorType：發(fā)起人類型
loadEventEnd：加載事件結(jié)束時間
loadEventStart：加載事件開始時間
name：這里一般就是當(dāng)前請求的 url 的地址
nextHopProtocol：下一個跳轉(zhuǎn)協(xié)議
redirectCount：重定向次數(shù)
redirectEnd：重定向開始時間，如果沒有重定向秋忙，值為0
redirectStart：重定向結(jié)束時間彩掐，如果沒有重定向构舟，值為0
requestStart：請求開始時間
responseEnd：響應(yīng)結(jié)束時間
responseStart：響應(yīng)開始時間
secureConnectionStart：安全連接開始時間
serverTiming：服務(wù)器時間
startTime：開始時間
transferSize：傳遞大小
type：該事件的類型
unloadEventEnd：卸載事件結(jié)束時間
unloadEventStart：卸載事件開始時間
workerStart：worker 開始時間
獲取Entry的方法
performance.getEntries()
瀏覽器獲取網(wǎng)頁時灰追，會對網(wǎng)頁中每一個對象（腳本文件、樣式表狗超、圖片文件等等）發(fā)出一個HTTP請求弹澎。performance.getEntries方法以數(shù)組形式，返回這些請求的時間統(tǒng)計信息努咐，有多少個請求苦蒿，返回數(shù)組就會有多少個成員。
-
transferSize: 資源大小渗稍，支持瀏覽器：Chrome 53 以上佩迟，可能出現(xiàn)為0的情況
- 原因：如果從本地緩存中獲取資源团滥，或者它是跨域資源，則此屬性返回零报强。
- 啟用CORS時灸姊，除非服務(wù)器的訪問策略允許共享這些值，否則許多這些值將返回零秉溉。這要求服務(wù)器提供資源以發(fā)送Timing-Allow-Origin HTTP響應(yīng)標(biāo)頭力惯，并提供一個值，該值指定允許獲得受限時間戳值的一個或多個起源召嘶。
- 從網(wǎng)頁本身以外的其他域加載資源時父晶，默認(rèn)情況下返回為0的屬性：redirectStart，redirectEnd弄跌，domainLookupStart甲喝，domainLookupEnd，connectStart铛只，connectEnd俺猿，secureConnectionStart，requestStart和responseStart格仲。
performance.getEntriesByType(type)
- getEntriesByType() 方法返回給定類型的 PerformanceEntry 列表
- performance.getEntriesByType("resource")方法為每個請求的資源獲取一個資源定時對象數(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()方法返回一個給定名稱和name和type屬性的PerformanceEntry對象數(shù)組
標(biāo)記與測算
performance.mark(name)
根據(jù)給出 name 值押袍，在瀏覽器的性能輸入緩沖區(qū)中創(chuàng)建一個相關(guān)的時間戳
performance.measure(name, startMark, endMark)
這里接收三個參數(shù)：
name：測量的名字
startMark：測量的開始標(biāo)志名字（也可以是 PerformanceTiming 屬性的名稱）
endMark：測量的結(jié)束標(biāo)志名字（也可以是 PerformanceTiming 屬性的名稱）
一般來說，performance.mark, performance.measure組合使用凯肋，例子如下
// 標(biāo)記開始
performance.mark("myTimestart");
// ...
dosometing();
// 標(biāo)記結(jié)束
performance.mark("myTimeend");
// 標(biāo)記開始點和結(jié)束點之間的時間戳
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();
