Performance Entry 介绍

Performance API 是前端性能监控中常用的API,下面对Performance API中的Performance Entry相关要点做一个梳理介绍

Performance API

Performance API最主要的作用就是支持应用程序中客户端的延时测量。

那么Performance API的时间测量与Date对象的时间定义有什么区别呢?

  1. 精度不同
  • Performance API 是高采样率的,因为其精确度可达千分之一毫秒(受硬件或软件限制)
  • Date 对象则基于 Unix Time Stamp,即自1970年1月1日(UTC)起经过的毫秒数
  1. 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();

推荐阅读更多精彩内容