前端性能指标计算方法
performace的兼容写法
var t = new Object(); var performance = window.performance || window.msPerformance || window.webkitPerformance; var resource = performance.getEntriesByType('resource') if ( resource && resource[0] ) { t = resource[0]; } else if (performance && performance.timing) { t = performance.timing; }
1、DNS查询耗时
t.domainLookupEnd - t.domainLookupStart || 0;
PerformaceTiming.domainLookupStart为域名开始解析时的 Unix毫秒时间戳
PerformaceTiming.domainLookupEnd为解析域名结束时的 Unix毫秒时间戳,
2、TCP建立连接耗时
t.connectEnd - t.connectStart;
PerformaceTiming.connectStart HTTP请求开始向服务器发送时的Unix毫秒时间戳
PerformaceTiming.connected浏览器与服务器之间的连接建立时的Unix毫秒时间戳
3、TTFB收到第一字节耗时
t.responseStart - t.requestStart;
PerformaceTiming.responseStart浏览器从服务器收到(或从本地缓存读取)第一个字节时的Unix毫秒时间戳
PerformaceTiming.requestStart浏览器向服务器发出HTTP请求时(或开始读取本地缓存时)的Unix毫秒时间戳。
4、Trans文本传输耗时
t.responseEnd - t.responseStart
PerformaceTiming.responseEnd浏览器从服务器收到(或从本地缓存读取,或从本地资源读取)最后一个字节时(如果在此之前HTTP连接已经关闭,则返回关闭时)的Unix毫秒时间戳。
5、Dom DOM结构解析耗时
body完成,header中写的js(不含defer属性)会影响该值.
t.domInteractive - t.responseEnd;
PerformaceTiming.domInteractive当前网页DOM结构结束解析、开始加载内嵌资源时(即Document.readyState
属性变为“interactive”、相应的readystatechange
事件触发时)的Unix毫秒时间戳。
PerformaceTiming.responseEnd浏览器从服务器收到(或从本地缓存读取,或从本地资源读取)最后一个字节时(如果在此之前HTTP连接已经关闭,则返回关闭时)的Unix毫秒时间戳。
6、SSL安全链接耗时
t.connectEnd - t.secureConnectionStart;
PerformaceTiming.
connected浏览器与服务器之间的连接建立时的Unix毫秒时间戳
PerformaceTiming.secureConnectionStart浏览器与服务器开始安全链接的握手时的Unix毫秒时间戳
7、FP首次绘制
if (performance && performance.getEntries) { var perfEntries = performance.getEntries(); for (var key in perfEntries) { if ( perfEntries[key].name && perfEntries[key].name === 'first-contentful-paint' && perfEntries[key].startTime ) { var fcp = perfEntries[key].startTime.toFixed(0) * 1; } if ( perfEntries[key].name && perfEntries[key].name === 'first-paint' && perfEntries[key].startTime ) { var fp = perfEntries[key].startTime.toFixed(0) * 1; } } }
8、FCP首次内容绘制
perfEntries[key].startTime.toFixed(0) * 1;
9、重定向耗时
if (t.navigationStart !== undefined) { rd = t.fetchStart - t.navigationStart } else if (t.redirectEnd !== undefined) { rd = t.redirectEnd - t.redirectStart } else { rd = 0 }
10、FMP有意义的绘画时间
https://github.com/iyjhabc/first-meaningful-paint/blob/master/src/index.js
11、TTI html加载耗时
t.domInteractive - t.fetchStart;
PerformaceTiming.fetchStart,表征了浏览器准备好使用HTTP请求来获取(fetch)文档的UNIX时间戳。这个时间点会在检查任何应用缓存之前。
12、Ready domContentLoaded耗时
t.domContentLoadedEventEnd - t.fetchStart
13、onload 加载完成耗时
t.loadEventStart - t.fetchStart;
参考: https://developer.mozilla.org/zh-CN/docs/Web/API/PerformanceTiming