【伯樂線上提示】：① 5月6日，谷歌開發者中心推出了一個 Web 開發最佳實踐手冊。伯樂線上資源頻道摘編該資源後，已邀請一些關注 Web 開發的朋友參與翻譯手冊。② 由於譯者朋友幾乎都是已在職，都是在工作之餘參與，每位的翻譯進度會不一樣（請理解），所以手冊中文版不會按照英文版章節順序釋出。③ 手冊中文版尚不完整，請不要轉載，謝謝合作。
【導讀】：如果你沒有辦法衡量效能，那麼你就沒有辦法優化效能。幸好，Navigation Timing API提供了所有必備工具來衡量關鍵渲染路徑中每一步的效能。
學習重點
- Navigation Timing提供了細粒度的時間戳以便衡量關鍵渲染路徑
- 瀏覽器會在關鍵渲染路徑的每一步中丟擲可捕獲的事件
作為有效的效能策略的基礎，準確的衡量和指導必不可少。這也就是Navigation Timing API為我們提供的。
上圖中的每一個標籤代表了瀏覽器在跟蹤頁面載入時捕獲的每一個細粒度時間戳。而且在這個例子中，我們也僅僅為大家展現了各種不同的時間戳中的一部分而已。我們暫且跳過所有和網路相關的時間戳，在後面的課程中還會詳細介紹。
那麼，這些時間戳到底有什麼含義呢？
- domLoading：這是整個載入程式開始的時間戳。瀏覽器從這個時間點開始解析收到的HTML頁面的第一個位元組。
- domInteractive：標記了瀏覽器完成解析HTML，DOM樹構建完畢的時間。
- domContentLoaded：標記了DOM準備就緒且沒有樣式資源阻礙JavaScript執行的時間點，我們可以開始構建渲染樹了。
- 很多JavaScript框架會在這個事件發生後才開始執行它們自己的邏輯。因此瀏覽器會通過捕獲domContentLoadedEventStart和domContentLoadedEventEnd來計算執行框架的程式碼邏輯需要多長時間。
- domComplete：不言自明，所有的處理過程結束，所有的頁面資源下載完成。瀏覽器視窗上表示頁面還在載入的圖示停止旋轉。
- loadEvent：作為所有頁面載入的最後一步，瀏覽器會在此時觸發onLoad時間，以便開始附加的應用邏輯。
HTML的規範中指明瞭每一個事件的詳細資訊：什麼時候觸發，什麼條件觸發之類。在我們的教程中，我們會重點著眼於和關鍵渲染路徑相關的事件：
- domInteractive：表示DOM準備就緒。
- domContentLoaded：表示DOM和CSSOM都準備就緒。如果沒有JavaScript阻塞渲染，該事件會在domInteractive事件之後立即觸發。
- domComplete：表示頁面及其附屬資源都已經準備就緒。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<html> <head> <title>Critical Path: Measure</title> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <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可以自動完成這些功能）這是一種很有效的監控頁面效能的方法，你也可以由此找出哪些頁面還需要進一步優化效能。