你不可以優化你不能測量的事情。但是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