Performance——前端性能监控

今天要做一个监控页面性能的插件，并把性能数据上报到数据库，由此接触到了performance。

一.什么是performance

Performance 是一个可以监控页面性能的api，可以获取到当前页面中与性能相关的信息。通过调用window.performance获取
在控制台中输入performance或window.performance可以看到如下内容：

performance对象

1.performance的属性

1）timing：包含延迟相关的性能信息，就是各种时间（详细说明见最下端附1，先大概了解，用到哪个再去看）
2）navigation：当前页面是通过什么方式导航过来的，只有两个属性：type，redirectCount

• type:标志页面导航类型，如下：

type常数	枚举值	描述
TYPE_NAVIGATE	0	普通进入，包括：点击链接、在地址栏中输入 URL、表单提交、或者通过除下表中 TYPE_RELOAD 和 TYPE_BACK_FORWARD 的方式初始化脚本。
TYPE_RELOAD	1	通过刷新进入，包括：浏览器的刷新按钮、快捷键刷新、location.reload()等方法。
TYPE_BACK_FORWARD	2	通过操作历史记录进入，包括：浏览器的前进后退按钮、快捷键操作、history.forward()、history.back()、history.go(num)。
TYPE_UNDEFINED	255	其他非以上类型的方式进入。

• redirectCount:表示到达最终页面前，重定向的次数，但是这个接口有同源策略限制，即仅能检测同源的重定向。

  
  
  

  普通进入
  
  
  

  刷新页面
  
  
  

  前进后退

3）memory：是 Chrome 添加的一个非标准扩展，不重要，忽略
4）timeOrigin：返回性能测量开始时的时间的高精度时间戳

2.方法

1）performance.getEntries()
getEntries()获取所有资源请求的时间数据，返回的是一个数组，包含了页面中所有的 HTTP 请求

getEntries()

getEntries()

[注意] HTTP 请求有可能命中本地缓存，所以请求响应的间隔将非常短 可以看到，与 performance.timing 对比： 没有与 DOM 相关的属性
与performance.timing相比新增属性：

• name：资源名称，是资源的绝对路径或调用mark方法自定义的名称
• startTime:开始时间
• duration：加载时间
• entryType：资源类型，entryType类型不同数组中的对象结构也不同！具体见下
• initiatorType：谁发起的请求

entryType的值：

entryType

initiatorType的值：

发起对象	值	描述
a Element	link/script/img/iframe等	通过标签形式加载的资源，值是该节点名的小写形式
a CSS resourc	css	通过css样式加载的资源，比如background的url方式加载资源
a XMLHttpRequest object	xmlhttprequest/fetch	通过xhr加载的资源
a PerformanceNavigationTiming object	navigation	当对象是PerformanceNavigationTiming时返回

3）performance.now()
performance.now() 与 Date.now() 不同的是，返回了以微秒（百万分之一秒）为单位的时间，更加精准

performance.now()与Date.now()比较

可以看到performance.now() 更精确

4）其他一些方法
clearMarks()
clearMeasures()
clearResourceTimings()
getEntries()
getEntriesByName()
getEntriesByType()
mark()
measure()
toJSON()

参考链接：
https://developer.mozilla.org/zh-CN/docs/Web/API/Performance
https://www.cnblogs.com/zhuyang/p/4789020.html
https://www.cnblogs.com/bldxh/p/6857324.html

附1：timing相关信息

• navigationStart:在同一个浏览器上下文中，前一个网页（与当前页面不一定同域）
• unload 的时间戳，如果无前一个网页 unload ，则与 fetchStart 值相等
• unloadEventStart:前一个网页（与当前页面同域）unload 的时间戳，如果无前一个网页 unload 或者前一个网页与当前页面不同域，则值为 0
• unloadEventEnd:和 unloadEventStart 相对应，返回前一个网页 unload 事件绑定的回调函数执行完毕的时间戳
• redirectStart:第一个 HTTP 重定向发生时的时间。有跳转且是同域名内的重定向才算，否则值为 0
• redirectEnd:最后一个 HTTP 重定向完成时的时间。有跳转且是同域名内的重定向才算，否则值为 0
• fetchStart:浏览器准备好使用 HTTP 请求抓取文档的时间，这发生在检查本地缓存之前
• domainLookupStart:DNS 域名查询开始的时间，如果使用了本地缓存（即无 DNS 查询）或持久连接，则与 fetchStart 值相等
• domainLookupEnd:DNS 域名查询完成的时间，如果使用了本地缓存（即无 DNS 查询）或持久连接，则与 fetchStart 值相等
• connectStart:HTTP（TCP） 开始建立连接的时间，如果是持久连接，则与 fetchStart 值相等,如果在传输层发生了错误且重新建立连接，则这里显示的是新建立的连接开始的时间
• connectEnd:HTTP（TCP） 完成建立连接的时间（完成握手），如果是持久连接，则与 fetchStart 值相等,如果在传输层发生了错误且重新建立连接，则这里显示的是新建立的连接完成的时间
  （注意:这里握手结束，包括安全连接建立完成、SOCKS 授权通过）
• secureConnectionStart:HTTPS 连接开始的时间，如果不是安全连接，则值为 0
  requestStart:HTTP 请求读取真实文档开始的时间（完成建立连接），包括从本地读取缓存,连接错误重连时，这里显示的也是新建立连接的时间
• responseStart:HTTP 开始接收响应的时间（获取到第一个字节），包括从本地读取缓存
• responseEnd:HTTP 响应全部接收完成的时间（获取到最后一个字节），包括从本地读取缓存
• domLoading:开始解析渲染 DOM 树的时间，此时 Document.readyState 变为 loading，并将抛出 readystatechange 相关事件
• domInteractive:完成解析 DOM 树的时间，Document.readyState 变为 interactive，并将抛出 readystatechange 相关事件
  （注意:只是 DOM 树解析完成，这时候并没有开始加载网页内的资源）
• domContentLoadedEventStart:DOM 解析完成后，网页内资源加载开始的时间,文档发生 DOMContentLoaded事件的时间
  domContentLoadedEventEnd:DOM 解析完成后，网页内资源加载完成的时间（如 JS 脚本加载执行完毕），文档的DOMContentLoaded 事件的结束时间
• domComplete:DOM 树解析完成，且资源也准备就绪的时间，Document.readyState 变为 complete，并将抛出 readystatechange 相关事件
• loadEventStart:load 事件发送给文档，也即 load 回调函数开始执行的时间,如果没有绑定 load 事件，值为 0
• loadEventEnd:load 事件的回调函数执行完毕的时间,如果没有绑定 load 事件，值为 0