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”、相应的
PerformaceTiming.responseEnd浏览器从服务器收到(或从本地缓存读取,或从本地资源读取)最后一个字节时(如果在此之前HTTP连接已经关闭,则返回关闭时)的Unix毫秒时间戳。
6、SSL安全链接耗时
t.connectEnd - t.secureConnectionStart;
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有意义的绘画时间
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;