前端性能监控利器-performance

一、前言

    最近在阅读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.requestStart

2、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;
}

 

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

https://segmentfault.com/a/1190000014479800