performance 查看頁面性能

咱們都知道瀏覽器從打開 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() 鉤子中埋點。