最全梳理 - 前端业务统计请求耗时方法

这里我们只是讨论一下， 请求耗时的一些统计手段， 并不涉及上报哈。

闲话不多说， 直接上干货

初级手段

**一、使用

fetch

结合时间戳**

1. 在发送请求前记录当前时间戳： - const startTime = performance.now();
2. 使用fetch发送请求： - fetch('your-api-url')
3. 在请求的.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

结合时间戳**

1. 创建XMLHttpRequest对象并记录开始时间： const xhr = new XMLHttpRequest();const startTime = performance.now();
2. 配置请求并发送：

• xhr.open('GET', 'your-api-url'); xhr.send();

3.在请求的

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

）**

1. 如果使用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 APIPerformance 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 统计请求耗时的方法：

1. 创建一个 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}` }); });};
2. 在主页面中使用 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 线程的情况下进行请求耗时统计。

原文：https://juejin.cn/post/7431224473851232266