perform指标分析_前端性能指标计算方法

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;