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

原文链接

起因

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

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

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

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

Navigation Timing API 用法

用法很简单，在页面load完之后我们可以从performance.timing对象中拿到我们需要的所有数据。见下图：

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

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

参数说明

具体文字说明：

• 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已经普及，绝大部分主流浏览器都已经支持

那么，开始优化你的app吧

---

3Fuyu