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

luzhuqun 发布于2019-08-20 18:04 / 2557人阅读

摘要：之前测试页面加载的时间都是在相应的位置打，通过计算时间差来实现。见下图不仅帮我们省去了繁琐的手动打点的操作，而且提供了以前我们无法获取到的数据，比如和连接所需的时间。如果没有发起请求，同上开始建立请求的时间。

原文链接

起因

最近接触到了一个性能优化方面为我们提供精准数据的工具，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 , "
TCP建立时间:", tcpTime, "
首屏时间:", firstPaintTime,
 "
dom渲染完成时间:", domRenderTime, "
页面onload时间:", loadTime);

效果如下：

兼容性

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

那么，开始优化你的app吧

3Fuyu

GPU云服务器云服务器各个服务器时间统一各个linux认证考试时间页面加载动态加载页面

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84064.html

使用性能API快速分析web前端性能

摘要：性能时间线以一个统一的接口获取由和所收集的性能数据。浏览器支持下表列举了当前主流浏览器对性能的支持，其中标注星号的内容并非来自于性能工作小组。页面的性能问题一直是产品开发过程中的重要一环，很多公司也一直在使用各种方式监控产品的页面性能。从控制台工具、Fiddler抓包工具，到使用DOMContentLoaded和document.onreadystatechange这种侵入式java...

mj 2019-08-21 10:48 评论0 收藏0
上报相关performance对象初略介绍

摘要：概述最近在做一个上报相关的需求，该需求指定上班的内容中包含页面记载的事件请求花费的事件以及渲染所要完成的时间等。网页导航的相关对象。浏览器内存情况相关对象。概述最近在做一个上报相关的需求，该需求指定上班的内容中包含页面记载的事件、请求花费的事件、以及DOM渲染所要完成的时间等。为此查阅了大量的文档，收集了很多资料，所以趁热打铁，把自己所了解的记录下来，方便以后查询。 perf...

junbaor 2019-08-21 10:23 评论0 收藏0
记录使用Performance API遇到的问题

摘要：记录使用遇到的问题本文中指的是。上线了以后拿到的首批数据中，后端时间计算出来竟然有负值，尤其在设备下，苦苦寻找原因，终于发现问题所在。如果事件没有触发，那么该接口就返回文档触发事件结束后的时间。记录使用Performance API遇到的问题本文中Performance API指的是Navigation Timing API。这并不是一篇Navigation Timing API的...

JerryWangSAP 2019-08-21 17:26 评论0 收藏0
前端网页加载渲染链路优化

摘要：所以，关于优化实战我们主要分为两部分加载渲染链路优化和编程代码优化。加载渲染链路优化从访问到页面呈现，整个链路可以做优化的思路。资源缓存这一节我们单独介绍缓存，是的，利用好缓存可以解决很多问题，包括页面加载和渲染的问题都能得到很好的优化。优化实战本文属于思否课堂VirtualDOM到AST玩转前端性能原理解析与代码实战课程官方博客：fed123.com 我们已经全面分析总结了评估页...

zhaofeihao 2019-08-30 15:56 评论0 收藏0