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

總結

以上是生活随笔為你收集整理的performance 查看页面性能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。