记录使用Performance API遇到的问题

记录使用Performance API遇到的问题

本文中Performance API指的是Navigation Timing API。这并不是一篇Navigation Timing API的介绍文章，而是我在使用中遇到的问题。

我在开发中遇到Navigation Timing API中的connectStart等时间节点并不是标准时间戳，而是0或者一个很小的数值，导致指标数据计算出错，尤其是IOS设备。原因如下:

IOS设备通过浏览器的前进后退按钮进入的页面，Navigation Timing API数据中connectStart，responseEnd等数据可能为0或者是一个比较小的数值，并不是对应时间点的时间戳。究其原因，IOS设备通过缓存读取页面时，Navigation Timing的计算与安卓实现不一致。

如果你还想了解下Navigation Timing API，可以继续往下看

Navigation Timing API

Navigation Timing API中包含全部的页面加载中关键节点的时间，例如navigationStart，connectEnd，responseEnd等时间。
具体的相关API可以去MDN查看，
浏览器支持程度也非常不错，移动端IOS9及以上，Android4及以上都支持，桌面端IE9也都支持。

一些常规的性能数据计算方法

DNS时间 = domainLookupEnd - domainLookupStart
TCP时间 = connectEnd - connectStart
后端时间 = responseEnd - connectEnd

白屏时间 = domInteractive - navigationStart
整屏时间 = loadEventEnd - navigationStart

解析dom树耗时 = domComplete - domInteractive
request请求耗时 = responseEnd - responseStart

我们团队就是按照如上指标来做的各个时间的统计，做了各种测试，线下数据都没什么问题。上线了以后拿到的首批数据中，后端时间计算出来竟然有负值，尤其在IOS设备下，苦苦寻找原因，终于发现问题所在。

IOS设备通过浏览器的前进后退按钮进入的页面，Navigation Timing API数据中connectStart，responseEnd等数据可能为0或者是一个比较小的数值，并不是对应时间点的时间戳。

关于首屏时间的定义

根据Navigation Timing API的时间，是没有办法计算首屏时间的，首屏时间也并没有严格的定义，我们团队采用的首屏时间如下

首屏时间 = （dom解析完毕 && 所有首屏图片加载完毕 ）- navigationStart

标准

属性	含义
navigationStart	准备加载新页面的起始时间
redirectStart	如果发生了HTTP重定向，并且从导航开始，中间的每次重定向，都和当前文档同域的话，就返回开始重定向的timing.fetchStart的值。其他情况，则返回0
redirectEnd	如果发生了HTTP重定向，并且从导航开始，中间的每次重定向，都和当前文档同域的话，就返回最后一次重定向，接收到最后一个字节数据后的那个时间.其他情况则返回0
fetchStart	如果一个新的资源获取被发起，则 fetchStart必须返回用户代理开始检查其相关缓存的那个时间，其他情况则返回开始获取该资源的时间
domainLookupStart	返回用户代理对当前文档所属域进行DNS查询开始的时间。如果此请求没有DNS查询过程，如长连接，资源cache,甚至是本地资源等。 那么就返回 fetchStart的值
domainLookupEnd	返回用户代理对结束对当前文档所属域进行DNS查询的时间。如果此请求没有DNS查询过程，如长连接，资源cache，甚至是本地资源等。那么就返回 fetchStart的值
connectStart	返回用户代理向服务器服务器请求文档，开始建立连接的那个时间，如果此连接是一个长连接，又或者直接从缓存中获取资源（即没有与服务器建立连接）。则返回domainLookupEnd的值
(secureConnectionStart)	可选特性。用户代理如果没有对应的东东，就要把这个设置为undefined。如果有这个东东，并且是HTTPS协议，那么就要返回开始SSL握手的那个时间。 如果不是HTTPS， 那么就返回0
connectEnd	返回用户代理向服务器服务器请求文档，建立连接成功后的那个时间，如果此连接是一个长连接，又或者直接从缓存中获取资源（即没有与服务器建立连接）。则返回domainLookupEnd的值
requestStart	返回从服务器、缓存、本地资源等，开始请求文档的时间
responseStart	返回用户代理从服务器、缓存、本地资源中，接收到第一个字节数据的时间
responseEnd	返回用户代理接收到最后一个字符的时间，和当前连接被关闭的时间中，更早的那个。同样，文档可能来自服务器、缓存、或本地资源
domLoading	返回用户代理把其文档的 "current document readiness" 设置为 "loading"的时候
domInteractive	返回用户代理把其文档的 "current document readiness" 设置为 "interactive"的时候.
domContentLoadedEventStart	返回文档发生 DOMContentLoaded事件的时间
domContentLoadedEventEnd	文档的DOMContentLoaded 事件的结束时间
domComplete	返回用户代理把其文档的 "current document readiness" 设置为 "complete"的时候
loadEventStart	文档触发load事件的时间。如果load事件没有触发，那么该接口就返回0
loadEventEnd	文档触发load事件结束后的时间。如果load事件没有触发，那么该接口就返回0