干货：如何十分钟实现一个简单的前端性能、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