前端性能監控之Performance

在平時開發項目的時候。尤爲是移動端開發, 咱們須要知道咱們的項目在真實客戶使用的過程當中,咱們的頁面白屏耗時, 徹底加載耗時, 解析dom樹耗時等等一系列的性能指標。而後經過對這些指標的分析,以便咱們着手從哪裏開始優化項目。 若是咱們在一開始便不須要藉助第三方SDK來幫助咱們完成對咱們項目的性能優化的時候, 咱們便須要本身開發一個類庫來幫助咱們收集統計這些耗時性能指標。 要作前端性能監控, 通常咱們會經過Performance API來獲取咱們所需指標。咱們在Chrome控制檯輸入Performance會獲得以下圖

咱們主要來看 Performanc.timing這個對象。

API	描述
connectEnd	返回瀏覽器與服務器之間的鏈接創建時的Unix毫秒時間戳。
connectStart	返回HTTP請求開始向服務器發送時的Unix毫秒時間戳。
domComplete	返回當前文檔解析完成，即Document.readyState 變爲 'complete'且相對應的readystatechange 被觸發時的Unix毫秒時間戳。
domContentLoadedEventEnd	返回當全部須要當即執行的腳本已經被執行（不論執行順序）時的Unix毫秒時間戳。
domContentLoadedEventStart	返回當解析器發送DOMContentLoaded 事件，即全部須要被執行的腳本已經被解析時的Unix毫秒時間戳。
domInteractive	回當前網頁DOM結構結束解析、開始加載內嵌資源時（即Document.readyState屬性變爲「interactive」、相應的readystatechange事件觸發時）的Unix毫秒時間戳。
domLoading	返回當前網頁DOM結構開始解析時（即Document.readyState屬性變爲「loading」、相應的 readystatechange事件觸發時）的Unix毫秒時間戳。
domainLookupEnd	返回了域名查詢結束的UNIX時間戳。
domainLookupStart	返回了域名查詢開始的UNIX時間戳。
fetchStart	返回了瀏覽器準備好使用HTTP請求來獲取(fetch)文檔的UNIX時間戳。
loadEventEnd	返回當load事件結束，即加載事件完成時的Unix毫秒時間戳。
loadEventStart	返回load事件被髮送時的Unix毫秒時間戳。
navigationStart	返回了從同一個瀏覽器上下文的上一個文檔卸載(unload)結束時的UNIX時間戳。
redirectEnd	返回了最後一個HTTP重定向完成時（也就是說是HTTP響應的最後一個比特直接被收到的時間）的UNIX時間戳。
redirectStart	返回了第一個HTTP重定向開始時的UNIX時間戳。
requestStart	返回瀏覽器向服務器發出HTTP請求時（或開始讀取本地緩存時）的Unix毫秒時間戳。
responseEnd	返回瀏覽器從服務器收到（或從本地緩存讀取，或從本地資源讀取）最後一個字節時（若是在此以前HTTP鏈接已經關閉，則返回關閉時）的Unix毫秒時間戳。
responseStart	返回瀏覽器從服務器收到（或從本地緩存讀取）第一個字節時的Unix毫秒時間戳。
secureConnectionStart	返回瀏覽器與服務器開始安全連接的握手時的Unix毫秒時間戳。
unloadEventEnd	返回了unload事件處理完成時的UNIX時間戳。
unloadEventStart	返回了unload事件拋出時的UNIX時間戳。

有了Performance.timing這個API, 咱們即可以經過它的屬性來計算咱們須要的性能指標了。 經常使用的指標有：

const timing = Performance.timing
let performanceTiming = {
  dnsTimer: {
    key: 'DNS查詢耗時',
    value: timing.domainLookupEnd - timing.domainLookupStart
  },
  tcpTimer: {
    key: 'TCP連接耗時',
    value: timing.connectEnd - timing.connectStart
  },
  requestTimer: {
    key: 'request請求耗時',
    value: timing.responseEnd - timing.responseStart
  },
  domTimer: {
    key: '解析dom樹耗時',
    value: timing.domComplete - timing.domInteractive
  },
  pageEmptyTimer: {
    key: '白屏時間',
    value: timing.responseStart - timing.navigationStart
  }
}
複製代碼

而後咱們即可將這些指標上報到咱們的服務器。咱們即可經過分析這些指標來處理咱們項目存在的問題。 須要主要的是, 在計算這些指標的時機, 最好是在整個頁面加載完成以後, 即寫在window.onload函數裏面。這樣的話取到的performance.timing是比較準確的。 在咱們從服務端取到上報的數據以後, 咱們最好有一個後臺系統來展現整個數據, 若是不想這麼麻煩的話, 也能夠選擇第三方性能監控工具, 咱們以前有用到聽雲就是一個不錯的性能監控平臺。 性能監控這塊因人而異, 若是隻須要拿到幾個指標, 就只須要用Performance即可以輕鬆完成咱們的需求, 若是對性能監控需求較細緻的話, 我的建議仍是使用第三方工具🙉。