测量关键渲染路径

Ilya Grigorik

发布时间：2014年3月31日

每个可靠的性能策略的基础都是良好的测量和工具。您无法优化您无法衡量的东西。本指南介绍了测量 CRP 性能的不同方法。

  • Lighthouse 方法对页面运行一系列自动化测试，然后生成关于页面 CRP 性能的报告。这种方法提供了在您的浏览器中加载的特定页面的 CRP 性能的快速和基本的高级概述，允许您快速测试、迭代和改进其性能。
  • Navigation Timing API 方法捕获真实用户监控 (RUM) 指标。顾名思义，这些指标是从真实用户与您网站的交互中捕获的，并提供了对真实世界 CRP 性能的准确视图，这是您的用户在各种设备和网络条件下体验到的。

一般来说，一个好的方法是使用 Lighthouse 来识别明显的 CRP 优化机会，然后使用 Navigation Timing API 来检测您的应用在实际环境中的性能表现。

使用 Lighthouse 审核页面

Lighthouse 是一种 Web 应用审核工具，它对给定的页面运行一系列测试，然后在整合的报告中显示页面的结果。您可以将 Lighthouse 作为 Chrome 扩展程序或 NPM 模块运行，这对于将 Lighthouse 与持续集成系统集成非常有用。

阅读“使用 Lighthouse 审核 Web 应用”以开始使用。

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

Lighthouse's CRP audits

有关此审核结果的更多信息，请参阅“关键请求链”。

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 demo

总而言之，我们现在有一些特定的里程碑要跟踪，以及一个输出这些测量的基本函数。请注意，除了在页面上打印这些指标之外，您还可以修改代码以将这些指标发送到分析服务器（Google Analytics 会自动执行此操作），这是跟踪页面性能并识别可以从一些优化工作中受益的候选页面的好方法。

DevTools 呢？

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

反馈