Performance API 是前端性能监控中常用的API，下面对Performance API中的Performance Entry相关要点做一个梳理介绍
Performance API
Performance API最主要的作用就是支持应用程序中客户端的延时测量。
那么Performance API的时间测量与Date对象的时间定义有什么区别呢？
- 精度不同
- Performance API 是高采样率的，因为其精确度可达千分之一毫秒（受硬件或软件限制）
- Date 对象则基于 Unix Time Stamp，即自1970年1月1日（UTC）起经过的毫秒数
- Performance API 支持单调时钟
- 使用 Date.now() 的差值并非绝对精确，因为计算时间时受系统限制（可能阻塞），有可能会出现 Time1 - Time2 是负值的情况
- performance.now() 方法返回一个DOMHighResTimeStamp,其时间是以恒定速率递增的，不受系统时间的影响（系统时间可被人为或软件调整）
Performance Entry
介绍
- PerformanceEntry 对象代表了 performance 时间列表中的单个 metric 数据.
- 每一个性能条目都可以在应用运行过程中通过手动构建 mark （en-US）或者 measure （en-US）（例如调用mark()方法）生成。
- Performance entries 在资源加载的时候，也会被动生成（例如图片、script、css等资源加载）
- Entries初始150个限制，可通过以下两个API修改
- 修改上限：setResourceTimingBufferSize(your_number);
- 清除当前保存的Entries：clearResourceTimings()
属性
- resource entry 结构如下
image.png
connectEnd：连接结束时间
connectStart：连接开始时间
decodedBodySize：解码的主体大小
domComplete：dom 渲染完成时间
domContentLoadedEventEnd：dom 内容加载事件结束时间
domContentLoadedEventStart：dom 内容加载事件开始时间
domInteractive：dom 交互时间
domainLookupEnd：域查找结束时间
domainLookupStart：域查找开始时间
duration：事件耗时
encodedBodySize：编码主体大小
entryType：资源输入类型
fetchStart：获取资源开始时间
initiatorType：发起人类型
loadEventEnd：加载事件结束时间
loadEventStart：加载事件开始时间
name：这里一般就是当前请求的 url 的地址
nextHopProtocol：下一个跳转协议
redirectCount：重定向次数
redirectEnd：重定向开始时间，如果没有重定向，值为0
redirectStart：重定向结束时间，如果没有重定向，值为0
requestStart：请求开始时间
responseEnd：响应结束时间
responseStart：响应开始时间
secureConnectionStart：安全连接开始时间
serverTiming：服务器时间
startTime：开始时间
transferSize：传递大小
type：该事件的类型
unloadEventEnd：卸载事件结束时间
unloadEventStart：卸载事件开始时间
workerStart：worker 开始时间
获取Entry的方法
performance.getEntries()
-
浏览器获取网页时，会对网页中每一个对象（脚本文件、样式表、图片文件等等）发出一个HTTP请求。performance.getEntries方法以数组形式，返回这些请求的时间统计信息，有多少个请求，返回数组就会有多少个成员。
-
transferSize: 资源大小，支持浏览器：Chrome 53 以上，可能出现为0的情况
- 原因：如果从本地缓存中获取资源，或者它是跨域资源，则此属性返回零。
- 启用CORS时，除非服务器的访问策略允许共享这些值，否则许多这些值将返回零。这要求服务器提供资源以发送Timing-Allow-Origin HTTP响应标头，并提供一个值，该值指定允许获得受限时间戳值的一个或多个起源。
- 从网页本身以外的其他域加载资源时，默认情况下返回为0的属性：redirectStart，redirectEnd，domainLookupStart，domainLookupEnd，connectStart，connectEnd，secureConnectionStart，requestStart和responseStart。
performance.getEntriesByType(type)
- getEntriesByType() 方法返回给定类型的 PerformanceEntry 列表
- performance.getEntriesByType("resource")方法为每个请求的资源获取一个资源定时对象数组
- 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对象数组
标记与测算
performance.mark(name)
根据给出 name 值，在浏览器的性能输入缓冲区中创建一个相关的时间戳
performance.measure(name, startMark, endMark)
这里接收三个参数：
name：测量的名字
startMark：测量的开始标志名字（也可以是 PerformanceTiming 属性的名称）
endMark：测量的结束标志名字（也可以是 PerformanceTiming 属性的名称）
一般来说，performance.mark, performance.measure组合使用，例子如下
// 标记开始
performance.mark("myTimestart");
// ...
dosometing();
// 标记结束
performance.mark("myTimeend");
// 标记开始点和结束点之间的时间戳
performance.measure(
"myTime",
"myTimestart",
"myTimeend"
);
// 获取所有名称为myTime的measures
var measures = performance.getEntriesByName("myTime");
var measure = measures[0];
console.log("myTime milliseconds:", measure.duration);
// 清除标记
performance.clearMarks();
performance.clearMeasures();
网友评论