window.performace对象介绍

// Performance

window.performance = {

// MemoryInfo

memory: {

jsHeapSizeLimit: 2197815296,

totalJSHeapSize: 19891755,

usedJSHeapSize: 17751931

},

// PerformanceNavigation

navigation: {

redirectCount: 0, // 无符号短整型重定向的数量（只读），但是这个接口有同源策略限制，即仅能检测同源的重定向；

type: 0, // 页面访问方式，值为下面的枚举字段

TYPE_BACK_FORWARD: 2, // (用户通过后退按钮访问本页面)

TYPE_NAVIGATE: 0, // (用户通过常规导航方式访问页面，比如点一个链接，或者一般的get方式)

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

TYPE_RESERVED: 255, // 任何其他方式

// 方法

toJSON: () => {}

},

onresourcetimingbufferfull: null, // 一个回调的 EventTarget，当触发 resourcetimingbufferfull 事件的时候会被调用。

timeOrigin: 1572577423789.0278,

// PerformanceTiming

timing: {

connectStart: 1572577424271, // 分别代表TCP建立连接和连接成功的时间节点。如果浏览器没有进行TCP连接（比如使用持久化连接webscoket），则两者都等于domainLookupEnd；

connectEnd: 1572577424412,

domComplete: 1572577426424, // html文档完全解析完毕的时间节点

domContentLoadedEventStart: 1572577425729, // 代表DOMContentLoaded事件触发的时间节点，页面文档完全加载并解析完毕之后,会触发DOMContentLoaded事件，HTML文档不会等待样式文件,图片文件,子框架页面的加载(load事件可以用来检测HTML页面是否完全加载完毕(fully-loaded))

domContentLoadedEventEnd: 1572577425731, // 代表DOMContentLoaded事件完成的时间节点，此刻用户可以对页面进行操作，也就是jQuery中的domready时间

domInteractive: 1572577425729, // 浏览器解析html文档的状态为interactive时的时间节点。domInteractive并非DOMReady，它早于DOMReady触发，代表html文档解析完毕（即dom tree创建完成）但是内嵌资源（比如外链css、js等）还未加载的时间点；

domLoading: 1572577424810, // 浏览器开始解析html文档的时间节点。我们知道IE浏览器下的document有readyState属性，domLoading的值就等于readyState改变为loading的时间节点

domainLookupStart: 1572577424271, // 分别代表DNS查询的开始和结束时间节点。如果浏览器没有进行DNS查询（比如使用了cache），则两者的值都等于fetchStart；

domainLookupEnd: 1572577424271,

fetchStart: 1572577424268, // 是指在浏览器发起任何请求之前的时间值。在fetchStart和domainLookupStart之间，浏览器会检查当前文档的缓存；

loadEventEnd: 1572577426429,

loadEventStart: 1572577426424,

navigationStart: 1572577423747, // 有些浏览器里是 startTime， 代表浏览器开始unload前一个页面文档的开始时间节点。比如我们当前正在浏览baidu.com，在地址栏输入google.com并回车，浏览器的执行动作依次为：unload当前文档（即baidu.com）->请求下一文档（即google.com）。navigationStart的值便是触发unload当前文档的时间节点，如果当前文档为空，则navigationStart的值等于fetchStart

redirectStart: 0, // redirect开始和结束的时间节点

redirectEnd: 0,

requestStart: 1572577424412, // 浏览器发起请求的时间节点，请求的方式可以是请求服务器、缓存、本地资源等；

responseStart: 1572577424701, // 浏览器收到从服务器端（或缓存、本地资源）响应回的第一个字节和最后一个字节数据的时刻

responseEnd: 1572577424712,

secureConnectionStart: 1572577424273, // 可选。如果页面使用HTTPS，它的值是安全连接握手之前的时刻。如果该属性不可用，则返回undefined。如果该属性可用，但没有使用HTTPS，则返回0；

unloadEventStart: 0, // 如果前一个文档和请求的文档是同一个域的，则分别代表浏览器unload前一个文档的开始和结束时间节点。否则两者都等于0；

unloadEventEnd: 0,

// 方法

toJSON: () => {}

},

// 方法

clearMarks: () => {}, // 将给定的 mark 从浏览器的性能输入缓冲区中移除。

clearMeasures: () => {}, // 将给定的 measure 从浏览器的性能输入缓冲区中移除。

clearResourceTimings: () => {}, // 从浏览器的性能数据缓冲区中移除所有 entryType 是 "resource" 的 performance entries。

getEntries: () => {}, // 获取页面中每个静态资源的请求, 基于给定的 filter 返回一个 PerformanceEntry 对象的列表。

getEntriesByName: () => {}, // 基于给定的 name 和 entry type 返回一个 PerformanceEntry 对象的列表。

getEntriesByType: () => {}, // 基于给定的 entry type 返回一个 PerformanceEntry 对象的列表

mark: () => {}, // 根据给出 name 值，在浏览器的性能输入缓冲区中创建一个相关的timestamp

measure: () => {}, // 在浏览器的指定 start mark 和 end mark 间的性能输入缓冲区中创建一个指定的 timestamp

now: () => {}, // 返回一个表示从性能测量时刻开始经过的毫秒数 DOMHighResTimeStamp

setResourceTimingBufferSize: () => {}, // 将浏览器的资源 timing 缓冲区的大小设置为 "resource" type performance entry 对象的指定数量

toJSON: () => {},

}

DNS查询耗时 = domainLookupEnd - domainLookupStart

TCP链接耗时 = connectEnd - connectStart

request请求耗时 = responseEnd - responseStart

解析dom树耗时 = domComplete - domInteractive

白屏时间 = domloadng - fetchStart

domready时间 = domContentLoadedEventEnd - fetchStart

onload时间 = loadEventEnd - fetchStart

重定向次数：

var redirectCount = navigation && navigation.redirectCount;

跳转耗时：

var redirect = timing.redirectEnd - timing.redirectStart;

APP CACHE 耗时：

var appcache = Math.max(timing.domainLookupStart - timing.fetchStart, 0);

DNS 解析耗时：

var dns = timing.domainLookupEnd - timing.domainLookupStart;

TCP 链接耗时：

var conn = timing.connectEnd - timing.connectStart;

等待服务器响应耗时（注意是否存在cache）：

var request = timing.responseStart - timing.requestStart;

内容加载耗时（注意是否存在cache）:

var response = timing.responseEnd - timing.responseStart;

总体网络交互耗时，即开始跳转到服务器资源下载完成：

var network = timing.responseEnd - timing.navigationStart;

渲染处理：

var processing = (timing.domComplete || timing.domLoading) - timing.domLoading;

抛出 load 事件：

var load = timing.loadEventEnd - timing.loadEventStart;

总耗时：

var total = (timing.loadEventEnd || timing.loadEventStart || timing.domComplete || timing.domLoading) - timing.navigationStart;

可交互：

var active = timing.domInteractive - timing.navigationStart;

请求响应耗时，即 T0，注意cache：

var t0 = timing.responseStart - timing.navigationStart;

首次出现内容，即 T1：

var t1 = timing.domLoading - timing.navigationStart;

内容加载完毕，即 T3：

var t3 = timing.loadEventEnd - timing.navigationStart;