前端性能监控利器-performance
程序员文章站
2022-06-09 14:41:14
...
一、前言
最近在阅读Vue源码时，发现了Vue当中使用到了performance的mark&measure方法，针对此api特此深入研究了一下performance的使用方法以及其作用。
二、performmance介绍
Performance对象里出现了4个属性：
1、timing对象提供了各种与浏览器处理相关的时间数据。具体如下表
| 名称 | 作用（这里所有时间戳都代表UNIX毫秒时间戳） |
|---|---|
| connectEnd | 浏览器与服务器之间的连接建立时的时间戳，连接建立指的是所有握手和认证过程全部结束 |
| connectStart | HTTP请求开始向服务器发送时的时间戳，如果是持久连接，则等同于fetchStart。 |
| domComplete | 当前网页DOM结构生成时，也就是Document.readyState属性变为“complete”,并且相应的readystatechange事件触发时的时间戳。 |
| domContentLoadedEventEnd | 当前网页DOMContentLoaded事件发生时，也就是DOM结构解析完毕、所有脚本运行完成时的时间戳。 |
| domContentLoadedEventStart | 当前网页DOMContentLoaded事件发生时，也就是DOM结构解析完毕、所有脚本开始运行时的时间戳。 |
| domInteractive | 当前网页DOM结构结束解析、开始加载内嵌资源时，也就是Document.readyState属性变为“interactive”、并且相应的readystatechange事件触发时的时间戳。 |
| domLoading | 当前网页DOM结构开始解析时,也就是Document.readyState属性变为“loading”、并且相应的readystatechange事件触发时的时间戳。 |
| domainLookupEnd | 域名查询结束时的时间戳。如果使用持久连接，或者从本地缓存获取信息的，等同于fetchStart |
| domainLookupStart | 域名查询开始时的时间戳。如果使用持久连接，或者从本地缓存获取信息的，等同于fetchStart |
| fetchStart | 浏览器准备通过HTTP请求去获取页面的时间戳。在检查应用缓存之前发生。 |
| loadEventEnd | 当前网页load事件的回调函数结束时的时间戳。如果该事件还没有发生，返回0。 |
| loadEventStart | 当前网页load事件的回调函数开始时的时间戳。如果该事件还没有发生，返回0。 |
| navigationStart | 当前浏览器窗口的前一个网页关闭，发生unload事件时的时间戳。如果没有前一个网页，就等于fetchStart |
| redirectEnd | 最后一次重定向完成，也就是Http响应的最后一个字节返回时的时间戳。如果没有重定向，或者上次重定向不是同源的。则为0 |
| redirectStart | 第一次重定向开始时的时间戳，如果没有重定向，或者上次重定向不是同源的。则为0 |
| requestStart | 浏览器向服务器发出HTTP请求时（或开始读取本地缓存时）的时间戳。 |
| responseEnd | 浏览器从服务器收到（或从本地缓存读取）最后一个字节时（如果在此之前HTTP连接已经关闭，则返回关闭时）的时间戳 |
| responseStart | 浏览器从服务器收到（或从本地缓存读取）第一个字节时的时间戳。 |
| secureConnectionStart | 浏览器与服务器开始安全链接的握手时的时间戳。如果当前网页不要求安全连接，则返回0。 |
| unloadEventEnd | 如果前一个网页与当前网页属于同一个域下，则表示前一个网页的unload回调结束时的时间戳。如果没有前一个网页，或者之前的网页跳转不是属于同一个域内，则返回值为0。 |
| unloadEventStart | 如果前一个网页与当前网页属于同一个域下，则表示前一个网页的unload事件发生时的时间戳。如果没有前一个网页，或者之前的网页跳转不是属于同一个域内，则返回值为0。 |
了解上面timeing提供的各种属性之后，我们可以计算出网页在加载时候某一部分消耗的具体时间，可以精确到千分之一毫秒。例如要计算出发送请求到接受完数据所消耗的时间。
const timing = window.performance.timing
const contactDuration = timing.responseEnd - timing.requestStart2、navigation，提供了2个属性值，type，redirectCount
- type=0：表示当前页面是通过点击链接，书签和表单提交，或者脚本操作，或者在url中直接输入地址访问的。
- type=1: 表示当前页面是点击刷新或者调用Location.reload()方法访问的。
- type=2: 表示当前页面是通过历史记录或者前进后退按钮访问的。
- type=255: 其他方式访问的
redirectCount：表示到达当前页面之前经过几次重定向。
3、timeOrigin
表示performance性能测试开始的时间。是一个高精度时间戳（千分之一毫秒）
4、performance.onresourcetimingbufferfull
表示当浏览器资源时间性能缓冲区已满时会触发的回调函数。下面是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 οnlοad="init()">
5、performance.memory
一个非标准属性，由chrome浏览器提供。这个属性提供了一个可以获取到基本内存使用情况的对象。
6、Performance.mark & Performance.measure
使用mark measure进行打点操作，可获得高精度的程序执行时间差，单位为微秒，即 千分之一毫秒
// 标记一个开始点
performance.mark("demo-start");
// 等待1000ms
setTimeout(function() {
// 标记一个结束点
performance.mark("demo-end");
// 标记开始点和结束点之间的时间戳
performance.measure(
"demo",
"demo-start",
"demo-end"
);
// 获取所有名称为mySetTimeout的measures
var measures = performance.getEntriesByName("demo");
console.log(measures)
var measure = measures[0];
console.log("setTimeout milliseconds:", measure.duration)
// 清除标记
performance.clearMarks();
performance.clearMeasures();
},1000)结果如图：
可以看到，高精度的时间戳是非常精准的。（我们知道由于执行队列的原因，setTimeout不会在给定的1000ms之后就立即执行）
Performance API提供了很多方便测试程序性能的接口。比如mark和measure。很多优秀的框架也用到了这个API进行测试，比如Vue框架。它里面就频繁用到了mark和measure来测试程序性能。所以想要开发高性能的web程序，了解Performace API还是非常重要的。
参考资料
https://developer.mozilla.org/zh-CN/docs/Web/API/Performance