转载

Navigation Timing获取页面加载各个阶段所需时间

起因

最近接触到了一个性能优化方面为我们提供精准数据的工具，Navigation Timing，本想从网上获取他更详细的信息，但搜索到的内容绝大部分都是国外的文章，遂决定写一遍具体分析的文章。

之前测试页面加载的时间都是在相应的位置打Date.now()，通过计算时间差来实现。这样的做法有很多弊端。

需要在许多地方添加额外的代码
记录的时间不准确
测试完之后需要找到每一个地方注释or删除，容易落下且麻烦

W3C Web Performance Working Group 引入了 Navigation Timing API 帮我们自动，精准的实现了性能测试的打点问题。

Navigation Timing API 用法

用法很简单，在页面load完之后我们可以从performance.timing对象中拿到我们需要的所有数据。见下图： Navigation Timing获取页面加载各个阶段所需时间

Navigation Timing不仅帮我们省去了繁琐的手动打点的操作，而且提供了以前我们无法获取到的数据，比如DNS和TCP连接所需的时间。

里面提供的具体事件如下图：

Navigation Timing获取页面加载各个阶段所需时间

参数说明

具体文字说明：

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事件执行完的时间

注，从domLoading开始往下的参数chrome官网并未给出具体英文解释，只是猜测，如有错误，欢迎纠正。附上官方链接

简单用法

这些参数已经非常详细，也很精准，稍作处理就可以得出我们需要的一些关键数字，如：

DNS解析时间： domainLookupEnd - domainLookupStart
TCP建立连接时间： connectEnd - connectStart
白屏时间： responseStart - navigationStart
dom渲染完成时间： domContentLoadedEventEnd - navigationStart
页面onload时间： loadEventEnd - navigationStart

demo如下：

let timing = performance.timing,
start = timing.navigationStart,
dnsTime = 0,
tcpTime = 0,
firstPaintTime = 0,
domRenderTime = 0,
loadTime = 0;
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 , '/nTCP建立时间:', tcpTime, '/n首屏时间:', firstPaintTime,
 '/ndom渲染完成时间:', domRenderTime, '/n页面onload时间:', loadTime);

效果如下：

Navigation Timing获取页面加载各个阶段所需时间