https://juejin.im/post/6892994632968306702
加载时间
具体文字说明:
- navigationStart 加载起始时间
- redirectStart 重定向开始时间(如果发生了HTTP重定向,每次重定向都和当前文档同域的话,就返回开始重定向的fetchStart的值。其他情况,则返回0)
- redirectEnd 重定向结束时间(如果发生了HTTP重定向,每次重定向都和当前文档同域的话,就返回最后一次重定向接受完数据的时间。其他情况则返回0)
- fetchStart 浏览器发起资源请求时,如果有缓存,则返回读取缓存的开始时间
- domainLookupStart 查询DNS的开始时间。如果请求没有发起DNS请求,如keep-alive,缓存等,则返回fetchStart
- domainLookupEnd 查询DNS的结束时间。如果没有发起DNS请求,同上
- connectStart 开始建立TCP请求的时间。如果请求是keep-alive,缓存等,则返回domainLookupEnd
- (secureConnectionStart) 如果在进行TLS或SSL,则返回握手时间
- connectEnd 完成TCP链接的时间。如果是keep-alive,缓存等,同connectStart
- requestStart 发起请求的时间
- responseStart 服务器开始响应的时间
- domLoading 从图中看是开始渲染dom的时间,具体未知
- domInteractive 未知
- domContentLoadedEventStart 开始触发DomContentLoadedEvent事件的时间
- domContentLoadedEventEnd DomContentLoadedEvent事件结束的时间
- domComplete 从图中看是dom渲染完成时间,具体未知
- loadEventStart 触发load的时间,如没有则返回0
- loadEventEnd load事件执行完的时间,如没有则返回0
- unloadEventStart unload事件触发的时间
- unloadEventEnd unload事件执行完的时间
使用
封装一个性能测试的函数,需要用到的页面(如登录页、首页)放入即可
// 页面加载性能测试
export function performanceTest(){
let timing = window.performance.timing, // window对象内置的性能测试对象
start = timing.navigationStart, // 加载起始时间
dnsTime = 0, // DNS解析时间
tcpTime = 0, // TCP建立时间
firstPaintTime = 0, // 首屏时间
domRenderTime = 0, // dom渲染完成时间
loadTime = 0; // 页面onload时间
dnsTime = timing.domainLookupEnd - timing.domainLookupStart;
tcpTime = timing.connectEnd - timing.connectStart;
firstPaintTime = timing.responseStart - start;
domRenderTime = timing.domContentLoadedEventEnd - start;
loadTime = timing.loadEventEnd - start;
console.log(`
====================
DNS解析时间:${dnsTime} ms
TCP建立时间:${tcpTime} ms
首屏时间:${firstPaintTime} ms
dom渲染完成时间:${domRenderTime} ms
页面onload时间:${loadTime} ms
=====================`
);
};