深入理解前端性能监控(4)

发布时间：2019-04-08 23:06 所属栏目：21 来源：腾讯新闻前端团队

导读：受同源策略影响，跨域资源获取到的时间点，通常为0，如果需要更详细准确的时间点，可以单独请求资源通过performance.timing获得。或者资源服务器开启响应头Timing-Allow-Origin，添加指定来源站点，如下所示： Timi

受同源策略影响，跨域资源获取到的时间点，通常为0，如果需要更详细准确的时间点，可以单独请求资源通过performance.timing获得。或者资源服务器开启响应头Timing-Allow-Origin，添加指定来源站点，如下所示：

Timing-Allow-Origin: https://qq.com

方法集合

除了performance.getEntries之外，performance还包含一系列有用的方法。如下图

performance.now()

performance.now() 返回一个当前页面执行的时间的时间戳，用来精确计算程序执行时间。与 Date.now() 不同的是，它使用了一个浮点数，返回了以毫秒为单位，小数点精确到微秒级别的时间，更加精准。并且不会受系统程序执行阻塞的影响，performance.now() 的时间是以恒定速率递增的，不受系统时间的影响（系统时间可被人为或软件调整）。performance.timing.navigationStart + performance.now() 约等于 Date.now()。

let t0 = window.performance.now();  
doSomething();  
let t1 = window.performance.now();  
console.log("doSomething函数执行了" + (t1 - t0) + "毫秒.")

通过这个方法，我们可以用来测试某一段代码执行了多少时间。

performance.mark()

mark方法用来自定义添加标记时间。使用方法如下：

var nameStart = 'markStart';  
   var nameEnd   = 'markEnd';  
   // 函数执行前做个标记  
   window.performance.mark(nameStart);  
   for (var i = 0; i < n; i++) {  
       doSomething  
   }  
   // 函数执行后再做个标记  
   window.performance.mark(nameEnd);  
   // 然后测量这个两个标记间的时间距离，并保存起来  
   var name = 'myMeasure';  
   window.performance.measure(name, nameStart, nameEnd);

保存后的值可以通过 performance.getEntriesByname( 'myMeasure' )或者 performance.getEntriesByType（'measure'）查询。

Performance.clearMeasures()

从浏览器的性能输入缓冲区中移除自定义添加的 measure

Performance.getEntriesByName()

返回一个 PerformanceEntry 对象的列表，基于给定的 name 和 entry type

Performance.getEntriesByType()

返回一个 PerformanceEntry 对象的列表，基于给定的 entry type

Performance.measure()

在浏览器的指定 start mark 和 end mark 间的性能输入缓冲区中创建一个指定名称的时间戳，见上例

Performance.toJSON()

是一个 JSON 格式转化器，返回 Performance 对象的 JSON 对象

资源缓冲区监控

Performance.setResourceTimingBufferSize()

设置当前页面可缓存的最大资源数据个数，entryType为resource的资源数据个数。超出时，会清空所有entryType为resource的资源数据。参数为整数(maxSize)。配合performance.onresourcetimingbufferfull事件可以有效监控资源缓冲区。当entryType为resource的资源数量超出设置值的时候会触发该事件。

Performance.clearResourceTimings()

从浏览器的性能数据缓冲区中移除所有的 entryType 是 "resource" 的 performance entries

下面是mdn上关于这个属性的一个demo。这个demo的主要内容是当缓冲区内容满时，调用buffer_full函数。

function buffer_full(event) {  
  console.log("WARNING: Resource Timing Buffer is FULL!");  
  performance.setResourceTimingBufferSize(200);  
}  
function init() {  
  // Set a callback if the resource buffer becomes filled  
  performance.onresourcetimingbufferfull = buffer_full;  
}  
<body onload="init()">

使用performance的这些属性和方法，能够准确的记录下我们想要的时间，再加上日志采集等功能的辅助，我们就能很容易的掌握自己网站的各项性能指标了。

兼容性

目前主流浏览器虽然都已支持performance对象，但是并不能支持它上面的全部属性和方法，有些细微的差别。本文主要依据chrome和qq浏览器测试了相关属性和方法，均可使用。

我们做了什么？（划重点）

（编辑：ASP站长网）