12.怎样设计一个全站请求耗时的统计工具#

const originalXhrOpen=XMLHttpRequest.prototype.open

XMLHttpRequest.prototype.open=function(...args){
	 this._startTime=performance.now()
	 this.addEventListener('load',function(){
		 const duration=performance.now()-this._startTime
		 console.log(`XHR ${args[1]} took ${duration}ms`)
		 reportRequestDuration(args[1],duration,'XMR')
	 })
	 originalXhrOpen.apply(this,args)
}

const originalFetch=window.fetch

window.fetch=async function(...args){
	 const startTime=performance.now()
	 const response=await originalFetch.apply(this,args)
	 const duration =performance.now()-startTime
	 console.log(`Fetch ${args[0]} took ${duration}ms`)
	 reportRequestDuration(args[0],duration,'Fetch')
}

function reportRequestDuration(url,duration,type){
	 fetch(`/api/report-request-duration`,{
		 method:'PoST',
		 headers:{
			 'Content-Type':'application/json'
		 },
		 body:JSON.stringify({url,duration,type})
	 })
}

// 图片上报
const img=document.createElement('img')
img.src='/api/xxx?a=1'