今天要做一个监控页面性能的插件，并把性能数据上报到数据库，由此接触到了performance。
一.什么是performance
Performance 是一个可以监控页面性能的api，可以获取到当前页面中与性能相关的信息。通过调用window.performance获取
在控制台中输入performance或window.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 请求
[注意] HTTP 请求有可能命中本地缓存，所以请求响应的间隔将非常短 可以看到，与 performance.timing 对比： 没有与 DOM 相关的属性
与performance.timing相比新增属性：
- name：资源名称，是资源的绝对路径或调用mark方法自定义的名称
- startTime:开始时间
- duration：加载时间
- entryType：资源类型，entryType类型不同数组中的对象结构也不同！具体见下
- initiatorType：谁发起的请求
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() 更精确
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
