使用导航正时API分析页面负载

深入剖析网页加载性能：Navigation Timing API详解

核心要点

• Navigation Timing API 提供了网页加载过程中的详细计时信息，包括DNS查找、TCP连接建立、页面重定向、DOM构建时间等指标。它内置于浏览器，不会产生额外开销。
• 目前，Navigation Timing API 仅支持 Internet Explorer 9 、Firefox 和 Chrome。因此，在使用 API 之前应先检测浏览器支持情况。该 API 在 window.performance.timing 对象中定义。
• API 记录了页面加载过程中众多里程碑事件的时间戳，每个事件都作为 window.performance.timing 对象的一个属性存储。如果某个事件未发生，其值为零。API 还定义了一个接口，用于确定用户如何访问特定页面。
• Navigation Timing API 可与 Ajax 调用结合使用，将实际用户数据报告回服务器。这允许开发者了解页面在真实环境中的行为。这些数据还可以用于创建页面加载过程的可视化图表。

网页加载速度是影响用户体验的关键因素之一。缓慢的加载速度会让用户感到沮丧并流失。然而，排查缓慢加载的原因通常并非易事，因为许多因素都会影响整体加载时间，例如用户的浏览器、网络状况、服务器负载和应用程序代码等等。幸运的是，Navigation Timing API 可以轻松地帮助我们解决这个问题。

过去，开发者收集这些方面数据的途径十分有限。许多开发者长期以来都使用 JavaScript 的 Date 对象来收集性能数据。例如，以下代码通过比较页面加载事件处理程序调用后的时间戳来测量加载时间：

<code class="language-javascript">var start = new Date();

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

这种方法存在几个问题：首先，JavaScript 的时间精度 notoriously 不高；其次，使用 Date 对象会引入开销并使应用程序代码混乱；第三，Date 对象只能测量代码在浏览器中运行后的执行时间，无法提供关于服务器、网络等页面加载过程的数据。

Navigation Timing API 的登场

为了提供更准确和全面的页面加载数据，W3C 提出了 Navigation Timing API。该 API 提供了页面加载过程中的更详细的计时信息。与 Date 对象不同，Navigation Timing API 可以提供与 DNS 查找、TCP 连接建立、页面重定向、DOM 构建时间以及其他各种指标相关的测量数据。Navigation Timing 也内置于浏览器，这意味着不会产生额外的开销。

检测浏览器支持

目前，Navigation Timing API 仅支持 Internet Explorer 9 、Firefox 和 Chrome。因此，在使用 API 之前应先检测浏览器支持情况。该 API 在 window.performance.timing 对象中定义。以下函数检测 API 是否受支持：

<code class="language-javascript">var start = new Date();

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

记录的事件

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

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

导航类型

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

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

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

<code class="language-javascript">var start = new Date();

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

数据解读

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

<code class="language-javascript">function supportsNavigationTiming() {
  return !!(window.performance && window.performance.timing);
}</code>

Navigation Timing API 可与 Ajax 调用结合使用，将实际用户数据报告回服务器。这很有用，因为它允许开发者了解页面在真实环境中的行为。这些数据还可以用于创建页面加载过程的可视化图表。事实上，Google Analytics 已经将其报告中纳入了导航计时数据。

需要记住的要点

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

(此处可以添加关于 Navigation Timing API 的常见问题解答 FAQ 部分，内容可根据需要从原文档中提取并进行改写)

以上是使用导航正时API分析页面负载的详细内容。更多信息请关注PHP中文网其他相关文章！