记录使用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