我們都知道瀏覽器從打開 url 到整個頁面渲染完成，中間的過程，大致是 DOM 解析，CSSOM 解析，JS 解析，渲染。網上關於這些內容的文章也很多了，本文不再贅述。
今天主要介紹 performance 這個衡量頁面加載性能的工具。
performance 有好幾個屬性，但是由於瀏覽器支持程度不同，我們主要用到的是支持最廣泛，最常用的performance.timing 這個屬性。
performance.timing 主要屬性如下：
這些屬性記錄的都是時間戳
navigationStart: 1500979373880, // 地址欄輸入 url 回車之後，或者用戶點擊鏈接開始打開 href 時
unloadEventStart: 0, // 前一個頁面觸發 unload 時間時，和當前頁面同源時才統計
unloadEventEnd: 0, // 前一個頁面 unload 事件處理函數結束時，和當前頁面同源時才統計
redirectStart: 0, // 重新向到當前頁面時，同源才統計
redirectEnd: 0, // 重定向結束時，同源才統計
fetchStart: 1500979373880, // 開始請求頁面
domainLookupStart: 1500979373880, // 開始解析域名，如果是本地有 DNS 緩存，或者使用 http-alive 複用 TCP 連接，則此屬性值和 fetchStart 相同
domainLookupEnd: 1500979373880, // 域名解析結束時，如果是本地有 DNS 緩存，或者使用 http-alive 複用 TCP 連接 ，則此屬性值和 fetchStart 相同
connectStart: 1500979373886, // 開始向服務器請求建立連接
secureConnectionStart: 0, // 開始進行 SSL 連接，不走 HTTPS 這個屬性值爲0
connectEnd: 1500979373887, // 連接建立完畢
requestStart: 1500979373887, // 開始向服務器發起請求
responseStart: 1500979374433, // 服務器開始響應請求
responseEnd: 1500979374540, // 服務器可能會採用流式響應，或者分片傳輸。這個屬性表示瀏覽器接收到完整頁面的時刻
domLoading: 1500979374442, // 開始解析 DOM, 此時 document.readyState 變成 loading
domInteractive: 1500979375806, // DOM 樹解析完成，此時 document.readyState 變成 interactive，可以在 JS 裏面訪問 DOM 了，但此時 JS 未必解析執行完畢了
domContentLoadedEventStart: 1500979375806, // JS 也解析執行完了(不包括 async 加載的 JS)，觸發 DOMContentLoaded 事件
domContentLoadedEventEnd: 1500979375827, // DOMContentLoaded 事件結束
domComplete: 1500979376043, // 頁面內資源全部加載完畢（比如圖片、音視頻），JS 解析完畢，此時 document.readyState 變爲 complete
loadEventStart: 1500979376043, // 觸發 onload 事件
loadEventEnd:1500979376049 // onload 事件結束
拿到這些節點的時間戳之後，各個階段的耗時就能知道了
如果我們把 JS 放在 </body> 前面，那麼 JS 執行耗時爲 domContentLoadedEventStart - domInteractive
DOM 和 CSS 解析渲染耗時：domInteractive - domLoading
白屏時間：domLoading - navigationStart
另外，目前我們比較多的用 react vue 等框架，經常在加載 JS 之後生成虛擬 DOM 再掛載到頁面上，這種情況，DOM 渲染完畢就需要我們手動埋點了，比如在 Vue 的跟組件 mounted() 鉤子中埋點。