Navigation Timing获取页面加载各个阶段所需时间
2017-07-16 本文已影响0人
3fuyu
起因
最近接触到了一个性能优化方面为我们提供精准数据的工具，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
