window.performance(监控网页与程序性能)
performance对象的完整结构
在chrome浏览器输入URL:https://www.baidu.com/跳转到百度主页,按下F12打开控制台输入window.performance,对象结构如下图:
1. performance的memory属性对象
memory: {
jsHeapSizeLimit: 2172649472 // 内存大小限制
totalJSHeapSize: 5891850 // 可使用的内存
usedJSHeapSize: 4044814 // JS 对象(包括V8引擎内部对象)占用的内存,一定小于 totalJSHeapSize
}
2. performance的navigation属性对象
navigation: {
redirectCount: 0, // 如果有重定向的话,页面通过几次重定向跳转而来
type: 0
// type的取值:0 1 2 255
// 0 即 TYPE_NAVIGATENEXT 正常进入的页面(非刷新、非重定向等);例如:(用户通过常规导航方式访问页面,比如点一个链接,或者一般的get方式)
// 1 即 TYPE_RELOAD 通过 window.location.reload() 刷新的页面;例如: (用户通过刷新,包括JS调用刷新接口等方式访问页面)
// 2 即 TYPE_BACK_FORWARD 通过浏览器的前进后退按钮进入的页面(历史记录);例如:(用户通过后退按钮访问本页面)
// 255 即 TYPE_UNDEFINED 非以上方式进入的页面
}
3. performance的timing 属性对象
timing属性的整体结构如下图
timing 属性的解释
timing: {
// 在同一个浏览器上下文中,前一个网页(与当前页面不一定同域)unload 的时间戳,如果无前一个网页 unload ,则与 fetchStart 值相等
navigationStart: 1594965271358,
// 前一个网页(与当前页面同域)unload 的时间戳,如果无前一个网页 unload 或者前一个网页与当前页面不同域,则值为 0
unloadEventStart: 1594965271476,
// 和 unloadEventStart 相对应,返回前一个网页 unload 事件绑定的回调函数执行完毕的时间戳
unloadEventEnd: 1594965271479,
// 第一个 HTTP 重定向发生时的时间。有跳转且是同域名内的重定向才算,否则值为 0
redirectStart: 0,
// 最后一个 HTTP 重定向完成时的时间。有跳转且是同域名内部的重定向才算,否则值为 0
redirectEnd: 0,
// 浏览器准备好使用 HTTP 请求抓取文档的时间,这发生在检查本地缓存之前
fetchStart: 1594965271374,
// DNS 域名查询开始的时间,如果使用了本地缓存(即无 DNS 查询)或持久连接,则与 fetchStart 值相等
domainLookupStart: 1594965271378,
// DNS 域名查询完成的时间,如果使用了本地缓存(即无 DNS 查询)或持久连接,则与 fetchStart 值相等
domainLookupEnd: 1594965271378,
// HTTP(TCP) 开始建立连接的时间,如果是持久连接,则与 fetchStart 值相等
// 注意如果在传输层发生了错误且重新建立连接,则这里显示的是新建立的连接开始的时间
connectStart: 1594965271378,
// HTTP(TCP) 完成建立连接的时间(完成握手),如果是持久连接,则与 fetchStart 值相等
// 注意如果在传输层发生了错误且重新建立连接,则这里显示的是新建立的连接完成的时间
// 注意这里握手结束,包括安全连接建立完成、SOCKS 授权通过
connectEnd: 1594965271437,
// HTTPS 连接开始的时间,如果不是安全连接,则值为 0
secureConnectionStart: 1594965271407,
// HTTP 请求读取真实文档开始的时间(完成建立连接),包括从本地读取缓存
// 连接错误重连时,这里显示的也是新建立连接的时间
requestStart: 1594965271437,
// HTTP 开始接收响应的时间(获取到第一个字节),包括从本地读取缓存
responseStart: 1594965271468,
// HTTP 响应全部接收完成的时间(获取到最后一个字节),包括从本地读取缓存
responseEnd: 1594965271526,
// 开始解析渲染 DOM 树的时间,此时 Document.readyState 变为 loading,并将抛出 readystatechange 相关事件
domLoading: 1594965271483,
// 完成解析 DOM 树的时间,Document.readyState 变为 interactive,并将抛出 readystatechange 相关事件
// 注意只是 DOM 树解析完成,这时候并没有开始加载网页内的资源
domInteractive: 1594965271737,
// DOM 解析完成后,网页内资源加载开始的时间
// 在 DOMContentLoaded 事件抛出前发生
domContentLoadedEventStart: 1594965271737,
// DOM 解析完成后,网页内资源加载完成的时间(如 JS 脚本加载执行完毕)
domContentLoadedEventEnd: 1594965271768,
// DOM 树解析完成,且资源也准备就绪的时间,Document.readyState 变为 complete,并将抛出 readystatechange 相关事件
domComplete: 1594965272079,
// load 事件发送给文档,也即 load 回调函数开始执行的时间
// 注意如果没有绑定 load 事件,值为 0
loadEventStart: 1594965272079,
// load 事件的回调函数执行完毕的时间
loadEventEnd: 1594965272087
}
timing 属性计算出网页性能数据
// 计算加载时间
function getPerformanceTiming () {
var performance = window.performance;
if (!performance) {
// 当前浏览器不支持
console.log('你的浏览器不支持 performance 接口');
return;
}
var t = performance.timing;
var times = {};
//【重要】页面加载完成的时间
//【原因】这几乎代表了用户等待页面可用的时间
times.loadPage = t.loadEventEnd - t.navigationStart;
//【重要】解析 DOM 树结构的时间
//【原因】反省下你的 DOM 树嵌套是不是太多了!
times.domReady = t.domComplete - t.responseEnd;
//【重要】重定向的时间
//【原因】拒绝重定向!比如,http://example.com/ 就不该写成 http://example.com
times.redirect = t.redirectEnd - t.redirectStart;
//【重要】DNS 查询时间
//【原因】DNS 预加载做了么?页面内是不是使用了太多不同的域名导致域名查询的时间太长?
// 可使用 HTML5 Prefetch 预查询 DNS ,见:[HTML5 prefetch](http://segmentfault.com/a/1190000000633364)
times.lookupDomain = t.domainLookupEnd - t.domainLookupStart;
//【重要】读取页面第一个字节的时间
//【原因】这可以理解为用户拿到你的资源占用的时间,加异地机房了么,加CDN 处理了么?加带宽了么?加 CPU 运算速度了么?
// TTFB 即 Time To First Byte 的意思
// 维基百科:https://en.wikipedia.org/wiki/Time_To_First_Byte
times.ttfb = t.responseStart - t.navigationStart;
//【重要】内容加载完成的时间
//【原因】页面内容经过 gzip 压缩了么,静态资源 css/js 等压缩了么?
times.request = t.responseEnd - t.requestStart;
//【重要】执行 onload 回调函数的时间
//【原因】是否太多不必要的操作都放到 onload 回调函数里执行了,考虑过延迟加载、按需加载的策略么?
times.loadEvent = t.loadEventEnd - t.loadEventStart;
// DNS 缓存时间
times.appcache = t.domainLookupStart - t.fetchStart;
// 卸载页面的时间
times.unloadEvent = t.unloadEventEnd - t.unloadEventStart;
// TCP 建立连接完成握手的时间
times.connect = t.connectEnd - t.connectStart;
return times;
}
4. performance.getEntries() 方法
这个函数返回的将是一个数组,包含了页面中所有的 HTTP 请求;
控制台输入方法后的返回结果
返回结果的第一个元素 window.performance.getEntries()[0] 结构
{
// 资源名称,也是资源的绝对路径
name: "https://www.baidu.com/"
nextHopProtocol: "http/1.1"
// 资源类型
entryType: "navigation"
// 谁发起的请求;
//link 即 <link> 标签;script 即 <script>;redirect 即重定 向
initiatorType: "navigation"
connectEnd: 79.33999999659136
connectStart: 20.535000003292225
decodedBodySize: 287235
domComplete: 721.5399999986403
domContentLoadedEventEnd: 410.14500000164844
domContentLoadedEventStart: 379.2749999993248
domInteractive: 379.1800000035437
domainLookupEnd: 20.535000003292225
domainLookupStart: 20.51499999652151
duration: 728.9250000030734
encodedBodySize: 70922
fetchStart: 16.06000000901986
loadEventEnd: 728.9250000030734
loadEventStart: 721.5649999998277
redirectCount: 0
redirectEnd: 0
redirectStart: 0
requestStart: 79.41500000015367
responseEnd: 167.92500000155997
responseStart: 110.39000000164378
secureConnectionStart: 49.43500000808854
serverTiming: []
startTime: 0
transferSize: 71528
type: "navigate"
unloadEventEnd: 121.32500000006985
unloadEventStart: 117.87000000185799
workerStart: 0
};
5. performance.now() 方法
此方法可以精确计算程序执行时间;performance.now() 与 Date.now() 不同的是,返回了以微秒(百万分之一秒)为单位的时间,更加精准。
并且与 Date.now() 会受系统程序执行阻塞的影响不同,performance.now() 的时间是以恒定速率递增的,不受系统时间的影响(系统时间可被人为或软件调整)。
注意 Date.now() 输出的是 UNIX 时间,即距离 1970 的时间,而 performance.now() 输出的是相对于 performance.timing.navigationStart(页面初始化) 的时间。
使用 Date.now() 的差值并非绝对精确,因为计算时间时受系统限制(可能阻塞)。但使用 performance.now() 的差值,并不影响我们计算程序执行的精确时间。
// 计算程序执行的精确时间
function getFunctionTimeWithDate (func) {
var timeStart = Date.now();
// 执行开始
func();
// 执行结束
var timeEnd = Date.now();
// 返回执行时间
return (timeEnd - timeStart);
}
function getFunctionTimeWithPerformance (func) {
var timeStart = window.performance.now();
// 执行开始
func();
// 执行结束
var timeEnd = window.performance.now();
// 返回执行时间
return (timeEnd - timeStart);
}
6. performance.mark()方法
此方法可以精确计算程序执行时间;使用 performance.mark() 标记各种时间戳(就像在地图上打点),保存为各种测量值(测量地图上的点之间的距离),便可以批量地分析这些数据了。
function randomFunc (n) {
if (!n) {
// 生成一个随机数
n = ~~(Math.random() * 10000);
}
var nameStart = 'markStart' + n;
var nameEnd = 'markEnd' + n;
// 函数执行前做个标记
window.performance.mark(nameStart);
for (var i = 0; i < n; i++) {
// do nothing
}
// 函数执行后再做个标记
window.performance.mark(nameEnd);
// 然后测量这个两个标记间的时间距离,并保存起来
var name = 'measureRandomFunc' + n;
window.performance.measure(name, nameStart, nameEnd);
}
// 执行三次看看
randomFunc();
randomFunc();
// 指定一个名字
randomFunc(888);
var marks = window.performance.getEntriesByType('mark');
console.log(marks);
// 看下保存起来的测量 measure
var measure = window.performance.getEntriesByType('measure');
console.log(measure);
保存起来的标记 mark
保存起来的标记 measure
自定义的测量
window.performance.getEntriesByName(‘measureRandomFunc888’)
从自定义的测量的duration值等于结束标记的startTime减去开始标记的startTime;
0.014999997802078724 = 7840.2899999928195 - 7840.274999995017
标记和测量用完了可以清除掉
// 清除指定标记
window.performance.clearMarks('markStart888');
// 清除所有标记
window.performance.clearMarks();
// 清除指定测量
window.performance.clearMeasures('measureRandomFunc888');
// 清除所有测量
window.performance.clearMeasures();
之前测量 domReady的方式:
// 计算 domReady 时间
var t = performance.timing;
var domReadyTime = t.domComplete - t.responseEnd;
console.log(domReadyTime)
现在测量 domReady的方式:
//第一个参数为measure名字,后面两个参数相当于开始和结束mark
window.performance.measure('domReady','responseEnd' , 'domComplete');
var domReadyMeasure = window.performance.getEntriesByName('domReady');
console.log(domReadyMeasure);