初级手段
一、使用fetch结合时间戳
在发送请求前记录当前时间戳：
const startTime = performance.now();使用
fetch发送请求：fetch('your-api-url')在请求的
.then()或.catch()中记录结束时间戳并计算耗时：
.then(response => {
const endTime = performance.now();
const duration = endTime - startTime;
console.log(`Request took ${duration} milliseconds.`);
return response;
})
.catch(error => {
const endTime = performance.now();
const duration = endTime - startTime;
console.log(`Request took ${duration} milliseconds with error: ${error}`);
});
二、使用XMLHttpRequest结合时间戳
创建
XMLHttpRequest对象并记录开始时间：
const xhr = new XMLHttpRequest(); const startTime = performance.now();
配置请求并发送：
xhr.open('GET', 'your-api-url'); xhr.send();
在请求的
onload、onerror等事件处理函数中记录结束时间并计算耗时：
xhr.onload = function () {
const endTime = performance.now();
const duration = endTime - startTime;
console.log(`Request took ${duration} milliseconds.`);
};
xhr.onerror = function () {
const endTime = performance.now();
const duration = endTime - startTime;
console.log(`Request took ${duration} milliseconds with error.`);
};
三、利用拦截器（axios）
如果使用
axios或类似的库，可以设置请求拦截器和响应拦截器：
在请求拦截器中记录开始时间，在响应拦截器中记录结束时间并计算耗时。
axios.interceptors.request.use((config) => {
config.startTime = performance.now();
return config;
});
axios.interceptors.response.use(
(response) => {
const endTime = performance.now();
const duration = endTime - response.config.startTime;
console.log(`Request to ${response.config.url} took ${duration} milliseconds.`);
return response;
},
(error) => {
const endTime = performance.now();
const duration = endTime - error.config.startTime;
console.log(`Request to ${error.config.url} took ${duration} milliseconds with error.`);
return Promise.reject(error);
}
);
总结
上面都属于一些初级手段，因为还是在浏览器进程里面， 一旦出现长任务阻塞了浏览器， 这个统计就不太准确了。
进阶手段 - Performance API
Performance API：performance.getEntriesByType('resource') 可以获取请求资源类的资源加载情况， 里面就有
Performance API 提供了一系列的性能测量工具，可以测量网页加载和运行过程中的各种性能指标。其中，可以通过以下方式来统计网络请求的耗时：
使用
performance.timing：performance.timing对象包含了网页加载过程中的各个时间点信息。可以通过计算不同时间点之间的差值来得到特定阶段的耗时。例如，可以计算
responseEnd（服务器响应结束的时间）和requestStart（开始请求的时间）之间的差值来得到请求的耗时。使用
performance.getEntriesByType('resource')：这个方法可以获取所有资源加载的性能条目。对于每个资源条目，可以获取其
startTime（开始时间）和responseEnd（响应结束时间）等属性，从而计算出资源加载的耗时。可以遍历这些条目，找到特定的网络请求资源，并计算其耗时。
以下是一个示例代码：
// 遍历所有资源加载条目，找到特定请求并计算耗时
const resources = performance.getEntriesByType("resource");
for (const resource of resources) {
// 指定请求连接诶
if (resource.name === "https://example.com/specific-resource") {
console.log(`Specific resource request took ${resource.duration} milliseconds.`);
break;
}
}
高级手段 - Web Worker
Web Worker 可以用于统计请求耗时。
以下是一种使用 Web Worker 统计请求耗时的方法：
创建一个 Web Worker 文件，例如
worker.js：
self.onmessage = function (event) {
const url = event.data.url;
const startTime = performance.now();
fetch(url)
.then((response) => {
const endTime = performance.now();
const duration = endTime - startTime;
self.postMessage({ duration });
})
.catch((error) => {
self.postMessage({ error: `Error fetching ${url}: ${error}` });
});
};
在主页面中使用 Web Worker：
const worker = new Worker("worker.js");
const url = "your-api-url";
worker.postMessage({ url });
worker.onmessage = function (event) {
if (event.data.duration) {
console.log(`Request to ${url} took ${event.data.duration} milliseconds.`);
} else {
console.error(event.data.error);
}
};
在这个例子中，Web Worker 负责发送请求并计算耗时，然后将结果发送回主页面。这样可以在不阻塞主页面 UI 线程的情况下进行请求耗时统计。
