Performance：前端页面性能监控

Performance 接口可以获取到当前页面中与性能相关的信息。该类型的对象可以通过调用只读属性 Window.performance 来获得。

1、属性

（1）Performance.navigation

提供了在指定时间内发生的操作相关信息，包括redirectCount和type两个属性：

redirectCount：重定向属性，返回当前页面发生了几次重定向。

type：返回值为0､1､2中的一个。

0: TYPE_NAVIGATE 用户通过常规导航方式访问页面，如果点击一个链接，或者一般的get方式。

1: TYPE_RELOAD 用户通过刷新，包括JS调用刷新接口等方式访问页面。

2: TYPE_BACK_FORWARD 用户通过后退按钮访问页面。

（2）Performance.timeOrigin

返回性能测量开始时间的高精度时间戳。

（3）Performance.memory

是Chrome添加的一个非标准扩展，提供了浏览器基本内存使用情况。

包括以下三个属性：

jsHeapSizeLimit：内存大小限制

totalJSHeapSize：当前js堆栈内存总大小

userdJSHeapSize：所有被使用的js堆栈内存，不能大于totalJSHeapSize，如果大于，则可能出现了内存泄漏

（4）Performance.timing 包括了页面相关的性能信息。

1、参考图：Performance.timing的各阶段

2、Performance.timing属性含义：

navigationStart：当前浏览器窗口的前一个网页关闭发生unload事件时的Unix毫秒时间戳。如果没有前一个网页，则等于fetchStart属性。
unloadEventStart：如果有前一个网页，且与当前网页同源，则返回前一个网页unload事件发生时的Unix毫秒时间戳。如果没有前一个网页，或前一个网页与当前网页不同源，则返回值为0。
unloadEventEnd：如果有前一个网页，且与当前网页同源，则返回前一个网页unload事件的回调函数结束时的Unix毫秒时间戳。如果没有前一个网页，或前一个网页与当前网页不同源，则返回值为0。
redirectStart：返回第一个HTTP跳转开始时的Unix毫秒时间戳。如果没有跳转，或者不同源，则返回值为0。
redirectEnd：返回最后一个HTTP跳转结束时的Unix毫秒时间戳。如果没有跳转，或者不同源，则返回值为0。
fetchStart：返回浏览器准备使用HTTP请求读取文档时的Unix毫秒时间戳。该事件在网页查询本地缓存之前发生。
domainLookupStart：返回域名查询开始时的Unix毫秒时间戳。如果使用持久连接，或者信息是从本地缓存获取，则返回值等同于fetchStart属性的值。
domainLookupEnd：返回域名查询结束时的Unix毫秒时间戳。如果使用持久连接，或者信息是从本地缓存获取，则返回值等同于fetchStart属性的值。
connectStart：返回HTTP请求开始向服务器发送时的Unix毫秒时间戳。如果使用持久连接，则返回值等同于fetchStart属性的值。
connectEnd：返回浏览器与服务器之间的连接建立（连接建立指所有的握手和认证过程全部结束）时的Unix毫秒时间戳。如果使用持久连接，则返回值等同于fetchStart属性的值。
secureConnectionStart：返回浏览器与服务器开始安全连接的握手时的Unix毫秒时间戳。如果当前网页不要求安全连接，则返回0。
requestStart：返回浏览器向服务器发出HTTP请求时（或开始读取本地缓存时）的Unix毫秒时间戳。
responseStart：返回浏览器从服务器收到（或从本地缓存读取）第一个字节时的Unix毫秒时间戳。
responseEnd：返回浏览器从服务器收到（或从本地缓存读取）最后一个字节时（如果在此之前HTTP连接已经关闭，则返回关闭时）的Unix毫秒时间戳。
domLoading：返回当前网页DOM结构开始解析时（即Document.readyState属性变为loading，相应的readystatechange事件触发时）的Unix毫秒时间戳。
domInteractive：返回当前网页DOM结构解析结束、开始加载内嵌资源时（即Document.readyState属性变为interactive，相应的readystatechange事件触发时）的Unix毫秒时间戳。
domContentLoadedEventStart：返回当前网页DOMContentLoaded事件发生时（即DOM结构解析完毕、所有脚本开始运行时）的Unix毫秒时间戳。
domContentLoadedEventEnd：返回当前网页DOMContentLoaded事件结束时的Unix毫秒时间戳。
domComplete：返回当前网页DOM结构生成时（即Document.reayState属性变为complete，以及相应的readystatechange事件发生时）的Unix毫秒时间戳。
loadEventStart：返回当前网页load事件的回调函数开始时的Unix毫秒时间戳。如果该事件还没发生，返回0。
loadEventEnd：返回当前网页load事件的回调函数结束时的Unix毫秒时间戳。如果该事件还没发生，返回0。

3、计算性能指标

可以使用Navigation.timing 统计到的时间数据来计算一些页面性能指标，比如DNS查询耗时、白屏时间、domready等等。如下：

DNS查询耗时 = domainLookupEnd - domainLookupStart
TCP链接耗时 = connectEnd - connectStart
request请求耗时 = responseEnd - responseStart
解析dom树耗时 = domComplete - domInteractive
白屏时间 = domloadng - fetchStart
domready时间 = domContentLoadedEventEnd - fetchStart
onload时间 = loadEventEnd - fetchStart

2、方法

（1）Performance.getEntries()

资源测速

（2）Performance.now()

返回一个表示从性能测量时刻开始（即navigationStart）到当前时间经过的毫秒数。可用来计算某个操作，或某个方法执行的耗时：

let t0 = window.performance.now();
doSomething();
let t1 = window.performance.now();
console.log("doSomething函数执行了" + (t1 - t0) + "毫秒.")

（3）Performance.mark()
在浏览器的性能输入缓冲区中创建一个 timestamp，基于给定的 name

performance.mark()给相应的视点做标记。结合performance.measure()使用也可以算出各个时间段的耗时。

（4）Performance.clearMarks()
移除给定的 mark，从浏览器的性能输入缓冲区中

（5）Performance.measure()
在浏览器的指定 start mark 和 end mark 间的性能输入缓冲区中创建一个指定的 timestamp

（6）Performance.clearMeasures()
移除给定的 measure，从浏览器的性能输入缓冲区中

（7）Performance.clearResourceTimings()
移除所有的 entryType 是 "resource" 的 performance entries，从浏览器的性能数据缓冲区中

（8）Performance.setResourceTimingBufferSize()
将浏览器的资源 timing 缓冲区的大小设置为 "resource" type performance entry 对象的指定数量

（9）Performance.getEntries()
返回一个 PerformanceEntry 对象的列表，基于给定的 filter

（10）Performance.getEntriesByName()
返回一个 PerformanceEntry 对象的列表，基于给定的 name 和 entry type

（11）Performance.getEntriesByType()
返回一个 PerformanceEntry 对象的列表，基于给定的 entry type

（12）Performance.toJSON()
是一个 JSON 格式转化器，返回 Performance 对象的 JSON 对象

使用performance的这些属性和方法, 能够准确的记录下我们想要的时间, 再加上日志采集等功能的辅助，我们就能很容易的掌握自己网站的各项性能指标了.