前端性能监控_performance.time-CSDN博客

本文链接：https://blog.csdn.net/qq_33332184/article/details/95453403

使用performance Api

Performace接口允许访问当前页面性能相关的信息。它是High Resolution Time API的一部分。但是它被Performance Timeline API, the Navigation Timing API, the User Timing API, and the Resource Timing API扩展增强了。

performance各部分含义

控制台上打印window.performance输出以下四部分内容：

timming提供了各种与浏览器处理相关的时间

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

我们可以计算出网页在加载时候某一部分消耗的具体时间，可以精确到千分之一毫秒。例如要计算出发送请求到接受完数据所消耗的时间。
在这里插入图片描述

const timing = window.performance.timing
const contactDuration = timing.responseEnd - timing.requestStart

function performanceTest(){
	　　let timing = performance.timing,
	　　readyStart = timing.fetchStart - timing.navigationStart,
	　　redirectTime = timing.redirectEnd - timing.redirectStart,
	　　appcacheTime = timing.domainLookupStart - timing.fetchStart,
	　　unloadEventTime = timing.unloadEventEnd - timing.unloadEventStart,
	　　lookupDomainTime = timing.domainLookupEnd - timing.domainLookupStart,
	　　connectTime = timing.connectEnd - timing.connectStart,
	　　requestTime = timing.responseEnd - timing.requestStart,
	　　initDomTreeTime = timing.domInteractive - timing.responseEnd,
	　　domReadyTime = timing.domComplete - timing.domInteractive,
	　　loadEventTime = timing.loadEventEnd - timing.loadEventStart,
	　　loadTime = timing.loadEventEnd - timing.navigationStart;
	
	　　console.log('准备新页面时间耗时：'+readyStart);
	　　console.log('redirect 重定向耗时：'+redirectTime);
	　　console.log('Appcache 耗时'+appcacheTime);
	　　console.log('unload 前文档耗时：'+unloadEventTime);
	　　console.log('DNS 查询耗时：'+lookupDomainTime);
	　　console.log('TCP 连接耗时：'+connectTime);
	　　console.log('request 请求耗时：'+requestTime);
	　　console.log('请求完毕至DOM加载：'+initDomTreeTime);
	　　console.log('解析DOM树耗时：'+domReadyTime);
	　　console.log('Load事件耗时：'+loadEventTime);
	　　console.log('加载时间耗时：'+loadTime);
　　}

Navigation有两个属性，一个是type，表示如何导航到当前页面的，主要有4个值：
- type=0表示直接通过连接，表单提交，脚本操作或者url地址直接得到
- type=1表示是通过刷新页面或者window.reload()方法得到
- type=2表示是通过访问历史记录，或者点击前进后退得到的
- type=3表示通过其他方式得到
  另一个属性是redirectCount，表示到达页面之前经过几次重定向
performance.timeOrgin表示性能开始测试时间，是一个高精度时间戳（千分之一毫秒）
performance.onresourcetimingbufferfull表示浏览器时间性能缓存区已满时会触发的回调函数

function buffer_full(event) {
  console.log("WARNING: Resource Timing Buffer is FULL!");
  performance.setResourceTimingBufferSize(200);
}
function init() {
  // Set a callback if the resource buffer becomes filled
  performance.onresourcetimingbufferfull = buffer_full;
}
<body onload="init()">

performance.memory可以获取内存使用基本情况的对象
performance.getEntries() 可以以数组形式，返回这些请求的时间统计信息，每个数组成员均是一个PerformanceResourceTiming对象
performance.mark

var start=window.performance.mark('start');
var app=document.getElementById('app');
app.innerHTML='app'
var end=window.performance.mark('end');
var marks=window.performance.measure('measure1', 'start', 'end');
console.log(marks)
window.performance.clearMarks('start');
window.performance.clearMarks('end');
window.performance.clearMeasures('measure1');

常用计算：

DNS查询耗时：domainLookupEnd - domainLookupStart
TCP链接耗时：connectEnd - connectStart
request请求耗时：responseEnd - responseStart
解析dom树耗时： domComplete - domInteractive
白屏时间：responseStart - navigationStart
domready时间(用户可操作时间节点) ：domContentLoadedEventEnd - navigationStart
onload时间(总下载时间) ：loadEventEnd - navigationStart

性能数据分析

DNS寻址时间：t.domainLookupEnd - t.domainLookupStart。
- 优化方法：检查页面是否添加了DNS预解析代码。
- <link rel=“dns-prefetch” href="//haitao.nosdn1.127.net">
- 是否合理利用域名发散与域名收敛的策略。
TCP连接耗时：t.connectEnd - t.connectStart。
首包时间: t.responseStart - t.navigationStart。
- 优化方法：是否加cdn，数据可否静态化等。
request请求耗时：t.responseEnd - t.requestStart。
- 优化方法：返回内容是否已经压缩过，静态资源是否打包好等。
白屏时间。
- 白屏时间是最影响用户体验的，时间越久，用户等待就越久。
解析DOM树结构的时间：t.domComplete - t.domLoading。
- 优化方法：检查dom节点是否过多，dom是否嵌套过深。
页面加载完成的时间：t.loadEventEnd - t.fetchStart。
- 优化方法：考虑延迟加载，懒加载，部分加载，减少首屏渲染时间。