使用Navigation Timing API分析页面加载

页面加载时间是网络上用户体验最重要的方面之一。 当页面加载速度太慢时，用户会很快感到沮丧，并将其业务转移到其他地方。 不幸的是，对缓慢的页面加载进行故障排除通常不是一个简单的过程，因为许多因素会影响整个时间。 例如，页面的加载时间可能受到用户浏览器，网络状况，服务器负载和应用程序代码等的影响。

作为开发人员，过去已经限制了收集有关这些各种因素的数据的方法。 对于许多开发人员而言，JavaScript Date对象长期以来一直是收集性能数据的标准。 例如，以下代码通过在调用页面的加载事件处理程序后比较时间戳来测量加载时间。

var start = new Date();

window.addEventListener("load", function() {
  var elapsed = (new Date()).getTime() - start.getTime();
}, false);

这种方法存在几个问题。 首先， 众所周知 ， JavaScript时间不准确 。 其次，使用Date对象会带来开销，并使应用程序代码混乱。 第三，Date对象只能在代码在浏览器中运行后才能测量执行时间。 Date对象不能提供有关服务器，网络等页面加载过程的任何数据。

为了提供更准确和全面的页面加载数据，W3C提出了Navigation Timing API 。 拟议的API在整个页面加载过程中提供了更详细的时序信息。 与Date对象不同，导航计时API可以提供与DNS查找，TCP连接建立，页面重定向，构建DOM所花费的时间以及各种其他指标有关的度量。 导航时间也直接内置到浏览器中，这意味着不会产生任何额外的开销。

检测支持

导航定时API当前仅在Internet Explorer 9 +，Firefox和Chrome中受支持 。 因此，在尝试使用API​​之前应先对其进行检测。 该API在窗口对象中定义为“ window.performance.timing”。 以下函数检测是否支持该API。

function supportsNavigationTiming() {
  return !!(window.performance && window.performance.timing);
}

记录的事件

该API记录页面加载过程中发生许多里程碑事件的时间。 这些事件中的每一个都存储为“ window.performance.timing”对象的属性。 以下列表描述了每个事件。 如果没有发生给定事件（例如页面重定向），则其值为零。 注意：Mozilla声称事件按此顺序发生。

• navigationStart ―表示浏览器完成提示卸载先前文档后立即等待的时间。 如果没有先前的文档，则“ navigationStart”等于“ fetchStart”（请参阅​​下一项）。 这是用户所感知的页面加载时间的开始。
• fetchStart ―“ fetchStart”表示浏览器开始搜索URL之前的时间。 搜索过程涉及检查应用程序缓存，或者如果未缓存文件，则向服务器请求文件。
• domainLookupStart ―“ domainLookupStart”值对应于URL的DNS查找发生之前的时间。 如果不需要DNS查找，则该值与“ fetchStart”相同。
• domainLookupEnd ―此值表示DNS查找后立即发生的时间。 如果不需要DNS查找，则该值与“ fetchStart”相同。
• connectStart ―表示浏览器连接服务器之前的时间。 如果URL是缓存的或本地资源，则此值等于“ domainLookupEnd”。
• connectEnd ―建立与服务器的连接后，将设置“ connectEnd”时间。 如果URL是缓存的或本地资源，则此值与“ domainLookupEnd”相同。
• secureConnectionStart ―如果使用HTTPS协议，则将“ secureConnectionStart”设置为安全握手开始之前的时间。 如果浏览器不支持HTTPS，则此值应未定义。
• requestStart ―“ requestStart”表示浏览器发送URL请求之前的时间。 API没有定义“ requestEnd”值。
• redirectStart ―“ redirectStart”表示启动重定向的URL提取的开始时间。
• redirectEnd ―如果存在任何重定向，则“ redirectEnd”表示接收到最后一个重定向响应的最后一个字节之后的时间。
• responseStart ―这对应于浏览器收到响应的第一个字节之后的时间。
• responseEnd ―这表示浏览器收到响应的最后一个字节后立即经过的时间。
• unloadEventStart ―这表示触发前一个文档的“ unload”事件之前的时间。 如果没有先前的文档，或者先前的文档来自其他来源，则此值为零。
• unloadEventEnd ―这表示触发前一个文档的“ unload”事件之后的时间。 如果没有先前的文档，或者先前的文档来自其他来源，则此值为零。 如果有任何指向不同来源的重定向，则“ unloadEventStart”和“ unloadEventEnd”均为零。
• domLoading ―“ domLoading”表示将“ document.readyState”值设置为“ loading”之前的时间。
• domInteractive ―“ domInteractive”对应于将“ document.readyState”值设置为“ interactive”之前的时间。
• domContentLoadedEventStart ―这表示在触发DOMContentLoaded事件之前的时间。
• domContentLoadedEventEnd ―这表示触发DOMContentLoaded事件之后的时间。
• domComplete ―“ domComplete”值表示将“ document.readyState”值设置为“ complete”之前的时间。
• loadEventStart ―此值表示在触发窗口的加载事件之前的时间。 如果尚未触发该事件，则该值为零。
• loadEventEnd ―这表示触发窗口的加载事件之后的时间。 如果事件尚未触发或仍在运行，则该值为零。

导航类型

Navigation Timing API还定义了一个接口，用于确定用户如何登陆特定页面。 “ window.performance”对象还包含一个“ navigation”对象，该对象包含两个属性“ type”和“ redirectCount”。 “ type”属性提供了用户导航到当前页面的方法。 以下列表描述了“类型”可以保存的值。

• 如果用户通过键入URL，单击链接，提交表单或通过脚本操作导航到页面，则“ type”的值为零。
• 如果用户重新加载/刷新页面，则“类型”等于一。
• 如果用户通过历史记录导航到页面（后退或前进按钮），则“类型”等于2。
• 在其他情况下，“类型”等于255。

“ redirectCount”属性包含进行到当前页面的重定向次数。 如果没有发生重定向，或者任何重定向来自其他来源，则“ redirectCount”为零。 以下示例显示了如何访问导航数据。

var navigation = window.performance.navigation;
var navType = navigation.type;
var redirectCount = navigation.redirectCount;

理解数据

导航计时API对于计算页面加载时间的某些组成部分很有用。 例如，可以通过从“ timing.domainLookupEnd”中减去“ timing.domainLookupStart”来计算执行DNS查找所需的时间。 以下示例计算了几个有用的指标。 “ userTime”对应于用户经历的总页面加载延迟。 “ dns”和“ connection”变量分别表示执行DNS查找和连接到服务器所花费的时间。 发送请求到服务器和接收响应所花费的总时间存储在“ requestTime”中。 最后，完成文档提取的总时间（包括访问任何缓存等）存储在“ fetchTime”中。 注意，setTimeout（）函数是从窗口加载事件处理程序中调用的。 这样可确保直到加载事件结束后才使用导航定时数据。 如果要从加载事件处理程序访问时序数据，则“ timing.loadEventEnd”的值为零。

window.addEventListener("load", function() {
  setTimeout(function() {
    var timing = window.performance.timing;
    var userTime = timing.loadEventEnd - timing.navigationStart;
    var dns = timing.domainLookupEnd - timing.domainLookupStart;
    var connection = timing.connectEnd - timing.connectStart;
    var requestTime = timing.responseEnd - timing.requestStart;
    var fetchTime = timing.responseEnd - timing.fetchStart;

    // use timing data
  }, 0);
}, false);

Navigation Timing API可以与Ajax调用结合使用，以将实际用户数据报告回服务器。 这很有用，因为它允许开发人员查看页面在现实世界中的行为。 数据还可以用于创建页面加载过程的可视化 。 实际上，Google Analytics（分析）已经将导航时间纳入其报告中。

要记住的事情

• JavaScript Date对象无法准确测量页面加载数据，因为它在浏览器中运行之前不了解请求。
• 导航计时API直接内置在浏览器中，并提供更详细的计时度量。
• 该API还跟踪用户如何导航到页面。
• 导航时间数据可以发送到服务器进行分析。

From: https://www.sitepoint.com/profiling-page-loads-with-the-navigation-timing-api/