Perform作为前端工程师，无论是业务需要还是我们对于自己开发的Web站点的要求，往往都有性能监测以及数据上报的需求。而Performance API除了简单易用对前端工程师极其友好的特点之外，还有能提供高精确度的时间测量（千分之一毫秒）这个特点。
window.onload = function(){
setTimeout(function(){
let t = performance.timing
console.log('DNS查询耗时 ：' + (t.domainLookupEnd - t.domainLookupStart).toFixed(0))
console.log('TCP链接耗时 ：' + (t.connectEnd - t.connectStart).toFixed(0))
console.log('request请求耗时 ：' + (t.responseEnd - t.responseStart).toFixed(0))
console.log('解析dom树耗时 ：' + (t.domComplete - t.domInteractive).toFixed(0))
console.log('白屏时间 ：' + (t.responseStart - t.navigationStart).toFixed(0))
console.log('domready时间 ：' + (t.domContentLoadedEventEnd - t.navigationStart).toFixed(0))
console.log('onload时间 ：' + (t.loadEventEnd - t.navigationStart).toFixed(0))
if(t = performance.memory){
console.log('js内存使用占比 ：' + (t.usedJSHeapSize / t.totalJSHeapSize * 100).toFixed(2) + '%')
}
})
}
一，performance中会出现的属性字段：
memory：只有在chrome才有，提供了基本内存的使用情况
navigation：提供了操作的上下文，包括页面的加载，刷新，重定向次数等等
timing：提供了浏览器上下文事件结束的各种UNIX时间戳（当前的时间ms，不是时间段）
方法字段：
performance.getEntries() /：对网页发起的所有HTTP请求耗时信息统计（时间段 ms）
二，memory属性
jsHeapSizeLimit：内存大小限制
totalJSHeapSize：可使用的内存大小
usedJSHeapSize：JS对象（包括V8引擎内部对象）占用的内存
三，navigation属性
redirectCount：重定向次数到本页面
type：0 正常页面（非刷新，重定向）1 通过刷新进入 2 通过浏览器前进后退按钮进入
255 非以上方式进入
四，timing属性
connectStart：HTTP域名解析完成的时间
connectEnd：HTTP浏览器与服务器之间连接建立完成的时间
domComplete：DOM文档解析完成，readyState变为complete
domContentLoadedEventStart：所有脚本已经执行完，开始执行DOMContentLoaded方法
domContentLoadedEventEnd：执行DOMContentLoaded方法结束
domInteractive：DOM结构加载结束，开始加载内嵌资源，readyState变为interactive
domLoading：DOM结构开始解析，readyState开始是loading
domainLookupStart：DNS域名查询开始
domainLookupEnd：DNS域名查询结束
fetchStart：浏览器发起任何请求之前的时间戳
loadEventStart：开始加载load事件
loadEventEnd：load事件加载结束
navigationStart：unload上一个文档的时间节点
redirectStart：第一个页面重定向开始的时间
redirectEnd：最后一个页面重定向结束的时间
requestStart：浏览器向服务器发起HTTP请求（包含缓存，本地资源）
responseStart：浏览器从服务器收到HTTP请求返回的第一个字节的时间
responseEnd：浏览器从服务器收到HTTP请求返回的最后一个字节的时间
secureConnectionStart：HTTPS协议握手之前的时间，如果非HTTPS，则为0
unloadEventStart：上一个文档unload事件的开始时间（需要是同源文档，否则为0）
unloadEventEnd：上一个文档unload事件的结束时间（需要是同源文档，否则为0）
五，时间应用
页面加载耗时：loadEventEnd - navigationStart
DNS查询耗时：domainLookupEnd - domainLookupStart
TCP链接完成握手耗时：connectEnd - connectStart
request请求耗时：responseEnd - responseStart
解析DOM树耗时：domComplete - domInteractive
白屏时间：domloading - fetchStart
DOMReady可操作时间：domContentLoadedEventEnd - fetchStart
onload总下载时间：loadEventEnd - fetchStart
重定向时间：redirectEnd - redirectStart
六，performance通用方法
performance.now()
根据navigation属性，开始计算毫秒数，通过两次时间相减可以计算某个操作的间隔时间
performance.mark(name)
基于name在浏览器的性能输入缓冲区中存入一个timestamp，可以多次重复录入，
可以使用performance.getEntriesByName()获取到对应的Array，
可以使用performance.clearMarks()清除
七，最后是时间关系图（W3C）
参考：Performance_js中计算网站性能监控利器_p312011150的博客-CSDN博客