深入领略前端机能监控

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

导读：在同样的收集情形下，有两个同样能满意你的需求的网站，一个唰的一下就加载出来了，另一个白屏转圈转了半天内容才出来，假如让你选择，你会用哪一个？页面的机能题目是前端开拓中一个重要环节，但一向以来我们没有较量好的本领，来检测页面的机能。直到W3

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赏识器测试了相干属性和要领，均可行使。

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

（编辑：湖南网）

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

7/8

首页

尾页

SEO排名难做的四大原因	在保持网站优化的同时
网站SEO优化的几个技巧	网站原创内容怎么写？