深入理解前端性能监控

发布时间：2019-04-09 15:08:07 所属栏目：建站来源：腾讯新闻前端团队

导读：副标题#e# 在同样的网络环境下，有两个同样能满足你的需求的网站，一个唰的一下就加载出来了，另一个白屏转圈转了半天内容才出来，如果让你选择，你会用哪一个？页面的性能问题是前端开发中一个重要环节，但一直以来我们没有比较好的手段，来检测页面的性

设置当前页面可缓存的最大资源数据个数，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浏览器测试了相关属性和方法，均可使用。

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

（编辑：西安站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

7/8

首页

尾页