面试题：设计一套全站请求耗时统计工具-小龙资源网

📌 温馨提示：
本文内容可能随时间变动而失效，请以页面显示的更新时间为准。
若内容已不准确或资源失效，欢迎留言或联系站长反馈修正。

⚠️ 免责声明：
本文仅供学习与参考，观点仅代表作者个人意见，与本站无关。
如有侵权问题，请立即联系我们处理，谢谢理解与支持。

设计一套全站请求耗时统计工具，可从以下几个关键部分着手：

一、前端数据采集

1. 请求拦截与时间记录：利用前端的XMLHttpRequest、fetch API或相关库（如axios）的拦截器来记录请求的开始时间。例如，在axios中，可以通过设置请求拦截器，在请求发出前记录当前时间：

axios.interceptors.request.use(config => {
    config.metadata = { startTime: new Date() };
    return config;
});

当请求完成（无论成功或失败）时，记录结束时间。在响应拦截器中进行如下操作：

axios.interceptors.response.use(response => {
    const endTime = new Date();
    const duration = endTime - response.config.metadata.startTime;
    // 后续可将duration等数据上报
    return response;
}, error => {
    const endTime = new Date();
    const duration = endTime - error.config.metadata.startTime;
    // 同样处理错误时的耗时数据上报
    return Promise.reject(error);
});

1. 使用Performance API：Performance API能获取更精准的页面性能数据。其中performance.getEntriesByType('resource')可以获取请求资源类的资源加载情况，从中得到请求开始时间startTime和响应结束时间responseEnd，进而计算请求耗时。示例代码如下：

const resources = performance.getEntriesByType('resource');
resources.forEach(resource => {
    const duration = resource.responseEnd - resource.startTime;
    // 处理每个资源请求的耗时数据
});

1. 上报数据：将每个请求的耗时数据（包括请求的URL、请求方法、状态码、耗时等）上报到后端进行统计和分析。上报策略可以选择每次请求完成时立即上报，也可以采用批量上报的方式，例如累计到一定数量的请求或者达到特定时间间隔后批量上报，以此减少对前端性能的影响。

二、后端数据处理

1. 请求拦截与时间记录：在后端的请求处理流程中，于请求开始时记录时间戳。以常见的Web框架（如Node.js的Express）为例，通过中间件实现：

const express = require('express');
const app = express();
app.use((req, res, next) => {
    req.startTime = Date.now();
    res.on('finish', () => {
        const duration = Date.now() - req.startTime;
        // 后续存储或处理duration数据
    });
    next();
});

1. 数据存储：将收集到的请求耗时数据存储在数据库中。可以选择关系型数据库（如MySQL、PostgreSQL），也可以使用专门的时间序列数据库（如InfluxDB）或日志系统来存储和查询这些数据。记录的数据应包含请求路径、方法、状态码、耗时、用户信息（若有必要）等。

1. 结合前端数据进行分析：若前端也上报了相关数据，后端可以将两者结合，分析出前端处理时间、网络传输时间、后端处理时间等不同阶段的时间占比，从而更全面地了解请求耗时的构成。

三、数据展示与分析

1. 数据可视化：借助数据分析工具（如Kibana、Grafana）对请求耗时数据进行可视化展示。展示内容可包括：
  - - 平均耗时：计算所有请求或特定类型请求的平均处理时间，帮助了解整体或部分接口的性能表现。
  - - 耗时分布：以图表形式展示请求耗时在不同时间区间的分布情况，直观呈现耗时的集中范围和离散程度。
  - - 耗时异常的请求：突出显示耗时超过一定阈值的请求，便于快速定位性能瓶颈。
  - - 趋势分析：按照时间维度展示某些请求的耗时变化趋势，观察系统性能随时间的波动情况。