计算渲染关键过程所花费的时间

你不可以优化你不能测量的事情。但是Navegation Timing API可以让我们测量关键的渲染过程时间！

Navigation Timing 为计算CRP提供了高精度的时间戳
浏览器发送了一系列可测量的时间来捕捉CRP的各种状态

Navigation Timing API 提供了良好的测量：

Navigation Timing

上表中的每个标签对应了一个高精度的时间戳，浏览器在每个网页加载的时候进行监测。我们去除一切和网络相关的时间戳，只展示一小部分：

domLoading: 这是整个过程中开始时的时间戳，浏览器第一次收到HTML文档的字节开始解析时的时间戳。
domInteractive: 当浏览器完成了所有的HTML解析且DOM构造完成时的时间戳。

domContentLoaded

许多js框架当它们开始执行它们自己的逻辑之前等待这个事件——因为浏览器捕捉EventStart和EventEnd时间戳来允许我们追踪这个事件执行多久。

domComplete: 和名字暗示的一样，页面上所有的资源（例如图片等）下载完成和页面上所有的操作都完
loadEvent: 当每个页面上最后一步加载浏览器的时候出发onload事件的时候会触发额外的应用逻辑

domInteractive 标记DOM完成

domContentLoaded

如果这里没有js阻塞的话domInteractive之后会马上是DOMContentLoaded

domComplete 标记当页面以及所有的资源都完成时候

<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 does this automatically)的代码。

原文链接：https://developers.google.com/web/fundamentals/performance/critical-rendering-path/measure-crp?hl=en