利用 Navigation Timing 获取页面加载各阶段耗时

[yangchch6]

Navigation Timing API

Navigation Timing API 提供了可用于衡量一个网站性能的数据。在页面load完之后我们可以从performance.timing对象中拿到我们需要的所有数据。见下图：

各阶段说明

每一个performance.timing属性都表示一个页面事件（例如页面发送了请求）或者页面加载（例如当DOM开始加载），测量以毫秒的形式从1970年1月1日的午夜开始。结果为0表示该事件未发生（例如redirectEnd或者redirectStart等）。

1）navigationStart：加载起始时间； 2）redirectStart：页面重定向时的开始时间（如果存在重定向的话）或者是0； 3）redirectEnd：如果存在重定向的话，redirectEnd表示最后一次重定向后服务器端response的数据被接收完毕的时间。否则的话就是0； 4）fetchStart：浏览器发起资源请求时，如果有缓存，则返回读取缓存的开始时间； 5）domainLookupStart：查询DNS的开始时间。如果请求没有发起DNS请求，如keep-alive，缓存等，则返回fetchStart； 6）domainLookupEnd：查询DNS的结束时间。如果没有发起DNS请求，如keep-alive，缓存等，则返回fetchStart； 7）connectStart：当浏览器开始于服务器连接时的时间。如果没有建立连接，如请求是keep-alive、缓存等，那么它的值等同于domainLookupEnd； 8）connectEnd：当浏览器端完成与服务器端建立连接的时刻。如果没有建立连接，如请求是keep-alive、缓存等，那么它的值等同于domainLookupEnd； 9）secureConnectionStart：如果页面使用HTTPS，它的值是安全连接握手之前的时刻。如果该属性不可用，则返回undefined。如果该属性可用，但没有使用HTTPS，则返回0； 10）responseStart：指客户端收到从服务器端（或缓存、本地资源）响应回的第一个字节的数据的时刻； 11）responseEnd：指客户端收到从服务器端（或缓存、本地资源）响应回的最后一个字节的数据的时刻； 12）domLoading：指document对象创建完成的时刻； 13）domInteractive：指文档解析完成的时刻，包括在“传统模式”下被阻塞的通过script标签加载的内容（除了使用defer或者async属性异步加载的情况）。 14）domContentLoadedEventStart：当DOMContentLoaded事件触发之前，浏览器完成所有script（包括设置了defer属性但未设置async属性的script）的下载和解析之后的时刻； 15）domContentLoadedEventEnd：当DOMContentLoaded事件完成之后的时刻。它也是javascript类库中DOMready事件触发的时刻； 16）domComplete：如果已经没有任何延迟加载的事件（所有图片的加载）阻止load事件发生，那么该时刻将会将document.readyState属性设置为"complete"，此时刻就是domComplete。 17）loadEventStart：该属性返回的是load事件刚刚发生的时刻，如果load事件还没有发生，则返回0。 18）loadEventEnd：该属性返回load事件完成之后的时刻。如果load事件未发生，则返回0。

获取页面加载各阶段耗时

利用以上信息，我们可以获取很多性能指标：

白屏

用户浏览器输入网址后至浏览器出现文字或1px图片所花费时间。 计算规则：优先使用Chrome、IE提供的firstPaintTime，没有获取到计算head中link、script脚本下载的最长时间。 （从导航到页面首次渲染消耗的时间，计算公式：firstPaintTime-navigationStart）

首屏

用户浏览器首屏内所有的元素呈现所花费时间。计算规则：寻找首屏区域内的所有图片，计算最长加载时间得到首屏时间。

可交互

网站某些功能可以使用的时间，也指domready时间。计算公式：可交互=Navigation Timing API domContentLoadedEventStart – fetchStart。

完全加载

页面完全加载总时间，以秒为单位。指从NavigationStart事件开始到LoadEventEnd事件结束，计算公式：LoadEventEnd-NavigationStart

HTML 加载

指主 HTML 文件从 DNS 解析到加载完且不包含排队时间和应用服务器响应时间，即包含 DNS，TCP 建连，Request 和 Response。 计算公式：responseEnd-domainlookupStart-排队时间-应用服务器响应时间

页面渲染

指从responseEnd事件开始到loadEventEnd结束，包含DOM解析和资源加载，计算公式：LoadEventEnd-responseEnd

DOM解析

指从responseEnd事件开始到DomContentLoadedEventEnd事件结束，计算公式：DomContentLoadedEventEnd-responseEnd

资源加载

指从DomContentLoadedEventEnd事件开始到loadEventEnd事件结束，计算公式：loadEventEnd-DomContentLoadedEventEnd

访问量

页面访问量（Page View，缩写PV）为每分钟页面访问数来记录。单位PPM（PageView per minute）

JS错误率

出现JS错误的比例。JS错误包含Javascript错误代码和位置信息。

服务端响应时间

服务器响应时间是指应用服务器处理请求所消耗的时间，即应用响应时间，等于请求到达应用服务器到应用代码执行完成并输出响应信息的时间。（需要通过Server探针自动注入方式嵌码，否则服务器响应时间为零）

Apdex T

1）根据对应用设定的 Apdex T 值计算的应用响应分数，基于“响应性”，Apdex 定义了 3 个用 户满意度区间：“满意”、“容忍”、“失望”； 2）这三个区间通过响应时间数值 “T” 来划分，T 值代表着用户对应用性能满意的响应时间界限或者说是“门槛”(Threshold)，也就是第一个区间“满意”的底线，如 0.5 秒； 3）满意区间就是 0~0.5 秒； 响应时间超过 T 值用户就有些不满意了，下一个区间“容忍”的界限值则是 T 和 4T，即 0.5~2 秒之间为容忍区间; 响应时间再长用户就开始考虑放弃了，最后一个区间“失望”的响应时间则大于 4T，即多于 2 秒。

Apdex指标

Apdex 对应用中发生的任务进行采样，并且按其响应时间把采样划分到相应的满意度区间，并做计数，再用一个公式计算 Apdex 指数； Apdex 指数 = [ 满意数量1 + 可容忍数量0.5 + 失望数量*0] / 总样本数;

页面耗时占比

1）该页面(主机)的页面加载时间占整个应用的页面加载时间百分比； 2）比如指定时间内，某应用或页面被访问到的主机是 a 和 b，其中主机 a 平均页面加载时间是 1.5s，pv 是 100，主机 b 平均页面加载时间是 2s，pv 是 130，则主机 a 的页面耗时占比为 (1.5100)/(1.5100+2*130)*100% = 36.6%。

慢页面

页面加载时间超过了【设置-Trace 阈值】的页面即为慢页面； 针对慢页面，Browser 探针将会记录详细的页面加载追踪数据。

慢页面占比

出现慢页面追踪的次数占(应用或主机或页面)总访问次数的百分比。

AJAX 请求响应时间

所有 Ajax 请求时间在时间轴的投影合并的总耗时：

unload

卸载当前页面的耗时，计算公式：unloadEnd-unloadStart

Redirect

页面重定向操作所消耗的时间，计算公式：redirectEnd-redirectStart

Cache

取缓存数据的耗时，计算公式：domainLookupStart-fetchStart

DNS

通过域名解析服务(DNS)，将指定的域名解析成 IP 地址的消耗时间，例如将解析 www.tingyun.com 解析成 42.62.104.177 的耗时。

TCP 建连时间

1）浏览器和WEB 服务器建立 TCP/IP 连接的消耗时间； 2）当元素下载完成后，浏览器可能会根 据服务器返回的结果保持此连接，而不是完全关闭此连接。当监测节点再次和相同的服务器建立连接时，会复用此连接，对应消耗时间可能为 0。 3）此指标即为 TCP/IP 连接三次握手的前二次握手的时间(从 IE 发送 TCP 包 SYN 到收到服务器返回的 TCP 包 SYN ACK 的时 间)，第三次握手时间(从 IE 发送 TCP 包 ACK 到服务器接收此 TCP 包的时间)不计算在内。

排队时间

排队时间指服务器端的请求阻塞时间，即请求从 Web服务器(例如 Apache, nginx 或F5 负载均衡设备)到达应用服务端的时间。

首包时间

从开始页面请求到浏览器开始接收到HTML代码的时间，不包括排队时间和服务器端的时间，计算公式：responseStart-connectEnd -排队时间-服务器响应时间

剩余包时间

从 responseStart 事件开始到 responseEnd 事件结束，计算公式：responseEnd-responseStart

首次交互时间

从用户的第一个动作发生时间 – navigationStart，其中动作包括：点击，按键，滚动鼠标。

自定义加载时间

每个页面都可以设置一个用户自定义的加载时间性能指标。当页面上的 AJAX 请求 URL 地址与该选项中的表达式匹配时，听云 Browser 探针会记录第一个匹配条件的 AJAX 请求的处理时间作为“自定义加载时间”。“自定义加载时间”可以在页面分析-页面维度性能指标曲线图中查看。

AJAX 响应时间

单位秒，平均每次 AJAX 请求的响应时间。

AJAX 传输数据量

单位 KB，平均每次 AJAX 请求的数据传输量(上传+下载字节数)。

AJAX 回调时间

单位秒，平均每次 AJAX 请求的回调时间(回调时间是指当数据从服务器传到客户端之后，本地代码调用这些数据做相应的处理，可以理解为本地执行时间)。

客户端时间

从请求某资源到下载完过程中，没有出现网络传输的时间片段之和，比如 DNS-TCP 建连，之间的切换需要消耗 CPU 来调度，这就可能会产生很短的时间空隙。

Request

(资源/元素的)首包时间。从 TCP 建连后到浏览器从服务端接收到第一次响应的时间。其中包括客户端发送请求、服务端响应以及网络传输的时间。

Response

(资源/元素的)剩余包时间。

页面耗时占比

该页面(主机)的页面加载时间占整个应用的页面加载时间百分比。比如指定时间内，某应用或页面被访问到的主机是 a 和 b，其中主机 a 平均页面加载时间是 1.5s，pv 是 100，主机 b 平均页面加载时间是 2s，pv 是 130，则主机 a 的页面耗时占比为 (1.5100)/(1.5100+2*130)*100%约 36.6%。

慢页面占比

该主机下发生慢页面的次数/该主机的总访问次数*100%。

Stalled（浏览器阻塞时间）

即从 TCP 连接建立完成，到真正可以传输数据之间的时间差。 计算公式：Stalled= (requestStart-navigationStart)-dns 耗时-tcp 耗时-ssl 耗时

慢元素

慢页面中耗时超过2s的元素，如页面中的png、js等。