乾貨：如何十分鐘實現一個簡單的前端性能、fetch請求實時監控？

乾貨：如何十分鐘實現一個簡單的前端性能、fetch請求實時監控？

最近在系統學習分佈式微服務架構，最後的技術衝刺

今天的文章由於年前一個朋友問題開始：

如何實時監控fetch請求，由於他想寫一個谷歌瀏覽器的插件，實時監控原生fetch請求，衆所周知，fetch源碼是將原生ajax封裝在內的，網上有一種辦法是重寫fetch，而後達到效果

對於這種操做我確定是拒絕的，因而就全面研究了一下前端性能監控，最終仍是找到了辦法

---

首先要知道performance的API 咱們從最簡單的開始

咱們查看 performance.timing 會獲得下面這些數據

---

咱們把上面的這個數據對象，傳入到組裝數據的函數內部便可：

下面都有詳細的註釋，看代碼複製就能用，固然SPA頁面的監控可能要定製精細化處理，這裏就不詳細講了。

// 處理數據
function handleData(performance) {
let navigationStart = performance.navigationStart || performance.fetchStart
let performanceData = {}
if (performance) {
// 重定向時間
            performanceData.redirectTime = performance.redirectEnd - performance.redirectStart
// 緩存時間
            performanceData.cacheTime = performance.domainLookupStart - performance.fetchStart
// dns查詢時間
            performanceData.dnsTime = performance.domainLookupEnd - performance.domainLookupStart
// tcp握手時間
            performanceData.TcpTime = performance.connectEnd - performance.connectStart
// ajax請求時間
            performanceData.ajaxTime = performance.responseEnd - performance.requestStart
// 開始解析dom時間，此時document.readyState 變爲 loading
            performanceData.domLoadingTime = performance.domLoading ? performance.domLoading - navigationStart : null
// dom解析完成時間，此時document.readyState 變爲 interactive
            performanceData.domInteractiveTime = performance.domInteractive - navigationStart
// dom解析完成，資源加載完成，腳本完成
            performanceData.domContentLoadedEventEndTime = performance.domContentLoadedEventEnd - navigationStart
// 頁面從開始到結束的所有時間時間
            performanceData.loadPageTime = performance.loadEventEnd ? performance.loadEventEnd - navigationStart : null
        }
return performanceData
    }

---

組裝好數據後，在window.onload事件觸發時發送：

window.onload = function () {
                let timing = window.performance.timing;
                let performanceData = handleData(timing)
                performanceData.timestamp = Date.now()
                performanceData.url = location.href
                performanceData.from = 'window.performance'
                performanceData = Object.assign({}, performanceData, getPaintTime())
                send(performanceData)
            }

最終上報發送組裝好的數據:

---

那麼問題來了，如何事實監控fetch請求呢？那麼一定有事件，並且是觀察者模式

這裏要用到PerformanceObserver這個API

MDN介紹：PerformanceObserver用於監測性能度量事件，在瀏覽器的性能時間軸記錄下一個新的performance entries 的時候將會被通知 

PerformanceObserver.observe()

指定監測的 entry types 的集合。當 performance entry 被記錄而且是指定的 entryTypes 之一的時候，性能觀察者對象的回調函數會被調用

---

咱們在構造調用PerformanceObserver的時候，傳入一個函數

perf_observer

制定entryTypes爲resource，當咱們發送fetch請求的時候，perf_observer

函數就會被調用

function perf_observer(list, observer) {
console.log(list, observer, 'resource', performance.getEntries())
    }

perf_observer函數：

function perf_observer(list, observer) {
console.log(list, observer, 'resource', performance.getEntries())
}

當發送fetch請求時，看打印結果：

這樣每次發送fetch請求，而後咱們打印 performance.getEntries()的結果，就能夠看到fetch請求了，固然，這裏能夠寫一個diff算法，緩存一份結果，給每個請求獨一無二的key值，每次fetch請求觸發perf_observer函數時候，只取出最新的、以前沒有的值上報便可

雖然不是什麼高深的知識點，但還算比較實用，以爲不錯能夠點個在看，看得懂源碼的人會本身去看，看不懂的你寫了也不會看。寫文章挺尷尬

長按二維碼關注咱們

有趣的內容在等你

我的weixin:CALASFxiaotan