你不可以优化你不能测量的事情。但是Navegation Timing API可以让我们测量关键的渲染过程时间！
- Navigation Timing 为计算CRP提供了高精度的时间戳
- 浏览器发送了一系列可测量的时间来捕捉CRP的各种状态
Navigation Timing API 提供了良好的测量：
上表中的每个标签对应了一个高精度的时间戳，浏览器在每个网页加载的时候进行监测。我们去除一切和网络相关的时间戳，只展示一小部分：
domLoading: 这是整个过程中开始时的时间戳，浏览器第一次收到HTML文档的字节开始解析时的时间戳。domInteractive: 当浏览器完成了所有的HTML解析且DOM构造完成时的时间戳。
domContentLoaded
- : 当DOM完毕且没有css样式阻止js的执行——意味着我们现在可以构造render tree——的时间戳。
- 许多js框架当它们开始执行它们自己的逻辑之前等待这个事件——因为浏览器捕捉EventStart和EventEnd时间戳来允许我们追踪这个事件执行多久。
domComplete: 和名字暗示的一样，页面上所有的资源（例如图片等）下载完成和页面上所有的操作都完loadEvent: 当每个页面上最后一步加载浏览器的时候出发onload事件的时候会触发额外的应用逻辑
domInteractive标记DOM完成
domContentLoaded
- 标记DOM和CSSOM的完成
- 如果这里没有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之后触发——且计算每个时间戳的不同。
就像我们所说和所做的儿一样，我么可使用一个函数简单的追踪测量所有这些过程。
你同样可以在你的代码中嵌入分析服务商(Google Analytics does this automatically)的代码。
原文链接：https://developers.google.com/web/fundamentals/performance/critical-rendering-path/measure-crp?hl=en