window.performance 性能监控-CSDN博客

window.performance

Web Performance API允许网页访问某些函数来测量网页和Web应用程序的性能。

首先，window.performance是用来测量网页和web应用程序的性能，他提供一组精确的数据，通过一些简单的计算，就可以得出一些有关网页的性能数据。接下来我们一起看看吧。

memory

memory是window.performance对象中一个重要的属性，他表示javascript对内存的占用。

window.performance.memory;
//memory对象格式
memory:{
    jsHeapSizeLimit:1136000000,// 内存大小限制
    totalJSHeapSize:11200000,// 可使用的内存
    usedJSHeapSize:10000000 // JS 对象（包括V8引擎内部对象）占用的内存，一定小于 totalJSHeapSize
}
复制代码

navigation

navigation同样作为window.performance对象下的重要属性，他主要表示当前页面的进入方式，是重定向，正常进入，刷新进入还是回退进入。

    navigation: {
        redirectCount: 0, // 如果有重定向的话，页面通过几次重定向跳转而来
        type: 0           // 0   即 TYPE_NAVIGATENEXT 正常进入的页面（非刷新、非重定向等）
                          // 1   即 TYPE_RELOAD       通过 window.location.reload() 刷新的页面
                          // 2   即 TYPE_BACK_FORWARD 通过浏览器的前进后退按钮进入的页面（历史记录）
                          // 255 即 TYPE_UNDEFINED    非以上方式进入的页面
    },

复制代码

timing

timing属性主要包括了浏览器从unload（卸载）之前的页面到新页面的load（加载完成）期间的一些列动作所消耗的时间，其执行过程为：

timing:{
    navigationStart:, //浏览器在开始unload前一个页面的时间节点
    //如果页面是由redirect而来
    redirectStart: //代表redirect的开始时间节点
    redirectEnd: //代表redirect的结束时间节点
    //如果前一个文档和请求的文档是同一个域的，则unloadEventStart和unloadEventEnd分别代表浏览器unload前一个文档的开始和结束时间节点。否则两者都等于0；
    unloadEventStart:
    unloadEventEnd:
    fetchStart: //浏览器发起任何请求之前的时间值
    domainLookupStart: //DNS查询的开始时间节点
    domainLookupEnd: //DNS查询结束的时间节点
    connectStart: //建立TCP连接时间节点
    connectEnd: //TCP连接成功时间节点
    
    secureConnectStart://可选。如果页面使用HTTPS，它的值是安全连接握手之前的时刻。如果该属性不可用，则返回undefined。如果该属性可用，但没有使用HTTPS，则返回0；
    requestStart: //发送请求的时间节点
    responseStart: //开始响应请求的时间节点
    responseEnd: //完成响应的时间节点
    domLoading: //代表浏览器开始解析html文档的时间节点
    domInteractive: //代表浏览器解析html文档的状态为interactive时的时间节点
    domContentLoadEventStart://代表DOMContentLoaded事件触发的时间节点
    domContentLoadEventEnd: //代表DOMContentLoaded事件完成的时间节点
    domCompelect: //html文档完全解析完毕的时间节点；
    //loadEventStart和loadEventEnd分别代表onload事件触发和结束的时间节点
    loadEventStart: 
    loadEventEnd:

}
复制代码

性能计算

根据上面的时间节点信息，我们可以分别计算出DNS查询耗时，TCP连接耗时，DOM解析时间等等

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

window.performance.getEntries();

当我们想要分析每个请求具体的耗时情况，我们可以使用window.performance.getEntries()方法返回所有请求数组。包括每个请求的详情。

connectStart: 
connectEnd:
initiatorType:'img', //请求资源类型【img/script/xmlhttprequst】
duration:108.39999999850988,//请求耗时
requstStart:
responseStart:
responseEnd:
复制代码

等等一系列资源请求的数据，可以根据这些数据进行具体的分析。附上一段获取性能数据的代码

var timing = window.performance.timing;
	//重定向耗时
	var redirectTime = timing.redirectEnd - timing.redirectStart;
	console.log('重定向耗时',redirectTime);
	//卸载上一个页面耗时
	var unloadTime = timing.unloadEventEnd - timing.unloadEventStart;
	console.log('卸载上一个页面耗时',unloadTime);
	//DNS查询耗时
	var domainTime = timing.domainLookUpEnd - timing.domainLookUpStart;
	console.log('DNS查询耗时',domainTime);
	//TCP连接耗时
	var tcpConnectTime = timing.connectEnd - timing.connectStart;
	console.log('TCP连接耗时',tcpConnectTime);
	//DOM开始加载前所花费时间
	var beforeDomLoadTime = timing.responseEnd - timing.navigationStart;
	console.log('DOM开始加载前所花费时间',beforeDomLoadTime);
	//请求耗时
	var responseTime = timing.responseEnd - timing.requestStart;
	console.log('请求耗时',responseTime);
	//DOM完成加载耗时
	var domLoadTime = timing.domCompelect - timing.domLoading;
	console.log('DOM完成加载耗时',domLoadTime);
	//DOM结构完成解析耗时
	var domComplieTime = timing.domInteractive - timing.domLoading ;
	console.log('DOM结构完成解析耗时',domComplieTime);
	//脚本加载时间
	var contentLoadTime = timing.domContentLoadedEventEnd - timing.domContentLoadedEventStart;
	console.log('脚本加载时间',contentLoadTime);
	//onload事件时间
	var loadTime = timing.loadEventEnd - timing.loadEventStart;
	console.log('onload事件时间',loadTime);
	//页面完全加载耗时
	var fullTime = redirectTime + unloadTime + domainTime + tcpConnectTime + responseTime+
					domLoadTime + domComplieTime ;
复制代码