衡量关键渲染路径

Ilya Grigorik
Ilya Grigorik
X 首页

发布时间：2014 年 3 月 31 日

作为每个可靠性能策略的基础，准确的评估和检测必不可少。无法评估就谈不上优化。本指南介绍了评估 CRP 性能的不同方法。

  • Lighthouse 方法会对页面运行一系列自动化测试，然后生成关于页面的 CRP 性能的报告。这种方法 简要概述了某个 从而使您能够快速地测试 并改进其性能。
  • Navigation Timing API 方法捕获的是真实用户 监控 (RUM) 指标。如名称所示，这些指标捕获自真实用户与网站的互动，并为真实的 CRP 性能（您的用户在各种设备和网络状况下的体验）提供了准确的信息。

一般来说，一种比较好的做法是使用 Lighthouse 识别明显的 CRP 优化机会，然后使用 Navigation Timing API，用于监控应用的实际性能。

使用 Lighthouse 审核网页

Lighthouse 是一个网络应用审核工具，可以对特定页面运行一系列测试，然后在汇总报告中显示页面的结果。您 您可以将 Lighthouse 作为 Chrome 扩展程序或 NPM 模块运行， 有助于将 Lighthouse 与持续集成系统集成。

请阅读使用 Lighthouse 审核网络应用，开始使用 Lighthouse。

您将 Lighthouse 作为 Chrome 扩展程序运行时，页面的 CRP 结果将如以下屏幕截图所示。

Lighthouse 的 CRP 审核

如需详细了解此项审核的几个方面，请参阅关键请求链 结果。

结合使用 Navigation Timing API 和页面加载时发出的其他浏览器事件，您可以捕获并记录任何页面的真实 CRP 性能。

Navigation Timing

上图中的每个标签都对应于浏览器为其加载的每个网页跟踪的高分辨率时间戳。实际上，在这个具体例子中，我们展示的只是各种不同时间戳的一部分。我们暂且跳过所有与网络有关的时间戳，但在后面的课程中还会做详细介绍。

那么，这些时间戳有何含义？

  • domLoading：这是整个过程的起始时间戳，浏览器即将开始解析第一批收到的 HTML 文档字节。
  • domInteractive：标记浏览器完成对所有内容的解析的时间点 HTML 和 DOM 构建流程便已完成。
  • domContentLoaded：标记了 DOM 准备就绪且没有样式表阻止 JavaScript 执行的时间点，这意味着我们现在可以（有可能）构建渲染树。
    • 许多 JavaScript 框架都会等待此事件发生后，才开始执行它们自己的逻辑。因此，浏览器会捕获 EventStart 和 EventEnd 时间戳，以便我们跟踪执行所花费的时间。
  • domComplete：顾名思义，所有处理完成，并且网页上的所有资源（图像等）都已下载完毕，也就是说，加载转环已停止旋转。
  • loadEvent：作为每次网页加载的最后一步，浏览器都会触发一个 onload 事件，该事件会触发其他应用逻辑。

HTML 规范规定了每个事件的具体条件：应在何时触发、应满足哪些条件以及其他重要注意事项。出于我们的目的，我们将重点关注与关键渲染路径相关的几个关键里程碑：

  • domInteractive 表示 DOM 准备就绪的时间点。
  • domContentLoaded 通常表示 DOM 和 CSSOM 均准备就绪的时间点。
    • 如果没有阻止解析器的 JavaScript，DOMContentLoaded 将在 domInteractive 后立即触发。
  • domComplete 表示网页及其所有子资源都准备就绪的时间点。
<!DOCTYPE html>
<html>
  <head>
    <title>Critical Path: Measure</title>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link href="style.css" rel="stylesheet" />
    <script>
      function measureCRP() {
        var t = window.performance.timing,
          interactive = t.domInteractive - t.domLoading,
          dcl = t.domContentLoadedEventStart - t.domLoading,
          complete = t.domComplete - t.domLoading;
        var stats = document.createElement('p');
        stats.textContent =
          'interactive: ' +
          interactive +
          'ms, ' +
          'dcl: ' +
          dcl +
          'ms, complete: ' +
          complete +
          'ms';
        document.body.appendChild(stats);
      }
    </script>
  </head>
  <body onload="measureCRP()">
    <p>Hello <span>web performance</span> students!</p>
    <div><img src="awesome-photo.jpg" /></div>
  </body>
</html>

试试看

前面的示例可能乍一看有点生畏，但实际上，它相当简单。Navigation Timing API 会捕获所有相关时间戳，而我们的代码会等待 onload 事件触发（回想一下，onload 事件在 domInteractive、domContentLoaded 和 domComplete 之后触发），然后计算各个时间戳之间的间隔。

NavTiming 演示

完成了所有该做的工作，我们现在知道了需要追踪哪些具体的里程碑，以及用于输出这些评估的基本函数。请注意，您也可以修改代码，将这些指标发送到分析服务器（Google Analytics 会自动执行此操作），而不是在网页上输出这些指标。这非常有助于您跟踪网页的效果，并确定可以通过优化工作获益的候选网页。

开发者工具怎么样？

尽管本文档使用 Chrome DevTools 的 Network 面板说明 CRP 概念，但 DevTools 并不适合 CRP 评估，因为它没有隔离关键资源的内置机制。运行 Lighthouse 审核来帮助识别此类资源。

反馈