首页 >iOS开发

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

2017-07-17 11:35 编辑: suiling 分类:iOS开发 来源:segmentfault

起因

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

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

  • 需要在许多地方添加额外的代码

  • 记录的时间不准确

  • 测试完之后需要找到每一个地方注释or删除,容易落下且麻烦

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

Navigation Timing API 用法

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

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

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

2.png

参数说明

具体文字说明:

  • 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);

效果如下:

3.png

兼容性

目前Navigation Timing已经普及,绝大部分主流浏览器都已经支持

4.png

那么,开始优化你的app吧

搜索CocoaChina微信公众号:CocoaChina
微信扫一扫
订阅每日移动开发及APP推广热点资讯
公众号:
CocoaChina
我要投稿   收藏文章
上一篇:iOS程序启动->dyld加载->runtime初始化(初识)
下一篇:浅谈 MVC、MVP 和 MVVM 架构模式
我来说两句
发表评论
您还没有登录!请登录注册
所有评论(0

综合评论

相关帖子

sina weixin mail 回到顶部