导航和资源时间

性能计时

performanceTiming API 是一个用于测量请求页面加载性能的 JavaScript API，它已被弃用，但在所有浏览器中都受支持。它已被 performanceNavigationTiming API 所取代。

性能计时 API 提供只读时间，以毫秒 (ms) 为单位，描述页面加载过程中每个点到达的时间。如下图所示，导航过程从 navigationStart、unloadEventStart、unloadEventEnd、redirectStart、redirectEnd、fetchStart、domainLookupStart、domainLookupEnd、connectStart、connectEnd、secureConnectionStart、requestStart、responseStart、responseEnd、domLoading、domInteractive、domContentLoadedEventStart、domContentLoadedEventEnd、domComplete、loadEventStart 和 loadEventEnd 进行。

借助上述指标和一些计算，我们可以计算许多重要的指标，例如首字节时间、页面加载时间、DNS 查找以及连接是否安全。

为了帮助测量完成所有步骤所需的时间，Performance Timing API 提供了导航计时的只读测量值。要查看和捕获我们应用程序的计时，我们输入

let time = window.performance.timing;

然后我们可以使用结果来衡量我们应用程序的性能。

顺序是

计算计时

我们可以使用这些值来测量感兴趣的特定计时

const dns = time.domainLookupEnd - time.domainLookupStart;
const tcp = time.connectEnd - time.connectStart;
const tls = time.requestStart - time.secureConnectionStart;

首字节时间

首字节时间 (Time to First Byte) 是 navigationStart（导航开始）和 responseStart（收到响应的第一个字节）之间的时间，可在 performanceTiming API 中获取

const ttfb = time.responseStart - time.navigationStart;

页面加载时间

页面加载时间是 navigationStart 和当前文档的加载事件开始发送之间的时间。它们仅在 performanceTiming API 中可用。

let pageloadTime = time.loadEventStart - time.navigationStart;

DNS 查找时间

DNS 查找时间是 domainLookupStart 和 domainLookupEnd 之间的时间。这些在 performanceTiming 和 performanceNavigationTiming API 中都可用。

const dns = time.domainLookupEnd - time.domainLookupStart;

TCP

TCP 握手所需的时间是连接开始和连接结束之间的时间

const tcp = time.connectEnd - time.connectStart;

TLS 协商

如果不可用，secureConnectionStart 将为 undefined；如果未使用 HTTPS，则为 0；如果可用且已使用，则为时间戳。换句话说，如果使用了安全连接，secureConnectionStart 将为 真值，并且 secureConnectionStart 和 requestStart 之间的时间将大于 0。

const tls = time.requestStart - time.secureConnectionStart;

Performance Entry API

上述通用性能计时已弃用但完全受支持。我们现在有 Performance Entry API，它提供了标记和测量导航和资源加载过程中的时间。您还可以创建标记

performance.getEntriesByType("navigation").forEach((navigation) => {
  console.dir(navigation);
});

performance.getEntriesByType("resource").forEach((resource) => {
  console.dir(resource);
});

performance.getEntriesByType("mark").forEach((mark) => {
  console.dir(mark);
});

performance.getEntriesByType("measure").forEach((measure) => {
  console.dir(measure);
});

performance.getEntriesByType("paint").forEach((paint) => {
  console.dir(paint);
});

performance.getEntriesByType("frame").forEach((frame) => {
  console.dir(frame);
});

在支持的浏览器中，您可以使用 performance.getEntriesByType('paint') 查询 first-paint 和 first-contentful-paint 的测量值。我们使用 performance.getEntriesByType('navigation') 和 performance.getEntriesByType('resource') 分别查询导航和资源计时。

导航计时

当用户请求网站或应用程序时，为了填充浏览器，用户代理会经历一系列步骤，包括 DNS 查找、TCP 握手和 TLS 协商，然后用户代理发出实际请求，服务器返回请求的资源。然后浏览器解析收到的内容，构建 DOM、CSSOM、可访问性和渲染树，最终渲染页面。一旦用户代理停止解析文档，用户代理会将文档就绪状态设置为交互式。如果有需要解析的延迟脚本，它将进行解析，然后触发 DOMContentLoaded 事件，之后就绪状态设置为完成。文档现在可以处理加载后任务，之后文档被标记为完全加载。

const navigationTimings = performance.getEntriesByType("navigation");

performance.getEntriesByType('navigation') 返回一个针对导航类型的 PerformanceEntry 对象数组。

可以从这些计时中获得很多信息。在上图中，我们通过 name 属性看到被计时文件是此文档。对于本解释的其余部分，我们使用以下变量

const timing = performance.getEntriesByType("navigation")[0];

协议

我们可以通过查询来检查使用的协议

const protocol = timing.nextHopProtocol;

它返回用于获取资源的网络协议：在本例中，http/2 为 h2。

压缩

要获得压缩节省百分比，我们将 transferSize 除以 decodedBodySize，然后从 100% 中减去。我们看到节省了超过 74%。

const compressionSavings = 1 - timing.transferSize / timing.decodedBodySize;

我们本可以使用

const compressionSavings = 1 - timing.encodedBodySize / timing.decodedBodySize;

但使用 transferSize 会包含开销字节。

为了进行比较，我们可以查看网络选项卡，发现我们传输了 22.04KB，而未压缩文件大小为 87.24KB。

如果我们用这些数字计算，我们会得到相同的结果：1 - (22.04 / 87.24) = 0.747。导航计时为我们提供了一种以编程方式检查传输大小和带宽节省的方法。

请注意，这仅是此单个文档的大小：仅针对此资源，而不是所有资源的总和。然而，持续时间、加载事件和与 DOM 相关的计时与整个导航有关，而不是此单个资产。客户端 Web 应用程序可能看起来比此应用程序更快，传输大小小于 10000，解码主体大小小于 30000，但这并不意味着 JavaScript、CSS 或媒体资产没有增加膨胀。检查压缩率很重要，但也要确保检查持续时间以及 DOMContentLoaded 事件结束到 DOM 完成之间的时间，因为长时间在主线程上运行 JavaScript 会导致用户界面无响应。

请求时间

API 并未提供您可能需要的每个测量值。例如，请求花了多长时间？我们可以利用现有的测量值来获得答案。

要测量响应时间，请从响应开始时间中减去请求开始时间。请求开始时间是指用户代理开始从服务器、相关应用程序缓存或本地资源请求资源之前的时刻。响应开始时间是指用户代理的 HTTP 解析器从相关应用程序缓存、本地资源或服务器收到响应的第一个字节之后的时刻，这发生在请求收到并处理之后。

const request = timing.responseStart - timing.requestStart;

加载事件持续时间

通过从当前文档加载事件完成的时间中减去当前文档加载事件触发前的精确时间戳，您可以测量加载事件的持续时间。

const load = timing.loadEventEnd - timing.loadEventStart;

DOMContentLoaded 事件

DOMContentLoaded 事件的持续时间是通过从事件完成后的时间值中减去用户代理触发 DOMContentLoaded 事件前的精确时间值来测量的。将其保持在 50 毫秒或更快有助于确保响应式用户界面。

const DOMContentLoaded =
  timing.domContentLoadedEventEnd - timing.domContentLoadedEventStart;

持续时间

我们获得了持续时间。持续时间是 PerformanceNavigationTiming.loadEventEnd 和 PerformanceEntry.startTime 属性之间的差值。

PerformanceNavigationTiming 接口还提供了关于您正在测量的导航类型的信息，返回 navigate、reload 或 back_forward。

资源计时

导航计时用于测量主页面的性能，通常是请求所有其他资产的 HTML 文件，而资源计时则测量单个资源的计时，即主页面调用的资产，以及这些资源请求的任何资产。许多测量是相似的：有 DNS 查找、TCP 握手和每个域执行一次的安全连接开始。

每个资源需要关注的主要事项。

另见

• PerformanceNavigationTiming
• PerformanceResourceTiming,
• PerformanceMark
• PerformanceMeasure
• PerformancePaintTiming