我們都知道瀏覽器從打開(kāi) url 到整個(gè)頁(yè)面渲染完成，中間的過(guò)程，大致是 DOM 解析，CSSOM 解析，JS 解析，渲染。網(wǎng)上關(guān)于這些內(nèi)容的文章也很多了，本文不再贅述。

今天主要介紹 performance 這個(gè)衡量頁(yè)面加載性能的工具。

performance 有好幾個(gè)屬性，但是由于瀏覽器支持程度不同，我們主要用到的是支持最廣泛，最常用的 performance.timing 這個(gè)屬性。

performance.timing 主要屬性如下：
這些屬性記錄的都是時(shí)間戳

navigationStart: 1500979373880, // 地址欄輸入 url 回車(chē)之后，或者用戶點(diǎn)擊鏈接開(kāi)始打開(kāi) href 時(shí) unloadEventStart: 0, // 前一個(gè)頁(yè)面觸發(fā) unload 時(shí)間時(shí)，和當(dāng)前頁(yè)面同源時(shí)才統(tǒng)計(jì) unloadEventEnd: 0, // 前一個(gè)頁(yè)面 unload 事件處理函數(shù)結(jié)束時(shí)，和當(dāng)前頁(yè)面同源時(shí)才統(tǒng)計(jì) redirectStart: 0, // 重新向到當(dāng)前頁(yè)面時(shí)，同源才統(tǒng)計(jì) redirectEnd: 0, // 重定向結(jié)束時(shí)，同源才統(tǒng)計(jì) fetchStart: 1500979373880, // 開(kāi)始請(qǐng)求頁(yè)面 domainLookupStart: 1500979373880, // 開(kāi)始解析域名，如果是本地有 DNS 緩存，或者使用 http-alive 復(fù)用 TCP 連接，則此屬性值和 fetchStart 相同 domainLookupEnd: 1500979373880, // 域名解析結(jié)束時(shí)，如果是本地有 DNS 緩存，或者使用 http-alive 復(fù)用 TCP 連接 ，則此屬性值和 fetchStart 相同 connectStart: 1500979373886, // 開(kāi)始向服務(wù)器請(qǐng)求建立連接 secureConnectionStart: 0, // 開(kāi)始進(jìn)行 SSL 連接，不走 HTTPS 這個(gè)屬性值為0 connectEnd: 1500979373887, // 連接建立完畢 requestStart: 1500979373887, // 開(kāi)始向服務(wù)器發(fā)起請(qǐng)求 responseStart: 1500979374433, // 服務(wù)器開(kāi)始響應(yīng)請(qǐng)求 responseEnd: 1500979374540, // 服務(wù)器可能會(huì)采用流式響應(yīng)，或者分片傳輸。這個(gè)屬性表示瀏覽器接收到完整頁(yè)面的時(shí)刻 domLoading: 1500979374442, // 開(kāi)始解析 DOM, 此時(shí) document.readyState 變成 loading domInteractive: 1500979375806, // DOM 樹(shù)解析完成，此時(shí) document.readyState 變成 interactive，可以在 JS 里面訪問(wèn) DOM 了，但此時(shí) JS 未必解析執(zhí)行完畢了 domContentLoadedEventStart: 1500979375806, // JS 也解析執(zhí)行完了(不包括 async 加載的 JS)，觸發(fā) DOMContentLoaded 事件 domContentLoadedEventEnd: 1500979375827, // DOMContentLoaded 事件結(jié)束 domComplete: 1500979376043, // 頁(yè)面內(nèi)資源全部加載完畢（比如圖片、音視頻），JS 解析完畢，此時(shí) document.readyState 變?yōu)?complete loadEventStart: 1500979376043, // 觸發(fā) onload 事件 loadEventEnd:1500979376049 // onload 事件結(jié)束

拿到這些節(jié)點(diǎn)的時(shí)間戳之后，各個(gè)階段的耗時(shí)就能知道了
如果我們把 JS 放在 </body> 前面，那么 JS 執(zhí)行耗時(shí)為 domContentLoadedEventStart - domInteractive

DOM 和 CSS 解析渲染耗時(shí)：domInteractive - domLoading

白屏?xí)r間：domLoading - navigationStart

另外，目前我們比較多的用 react vue 等框架，經(jīng)常在加載 JS 之后生成虛擬 DOM 再掛載到頁(yè)面上，這種情況，DOM 渲染完畢就需要我們手動(dòng)埋點(diǎn)了，比如在 Vue 的跟組件 mounted() 鉤子中埋點(diǎn)。

總結(jié)

以上是生活随笔為你收集整理的performance 查看页面性能的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。