设计一套全站请求耗时统计工具
1.使用同一个链接，如何实现PC打开是web 应用、手机打开是一个H5应用2.如何保证用户的使用体验3.如何解决页面请求接口大规模并发问题
4.设计一套全站请求耗时统计工具
5.大文件上传6.h5如何解决移动端适配问题7.实现站点一键换肤功能实现方式有哪些8.如何实现网页加载进度条9.常见图片懒加载方式有哪些10.cookie构成部分有哪些11.DNS协议了解多少12.函数式编程了解多少13.一直在window上面挂东西是否有什么风险14.小程序为什么会有两个线程15.如何通过设置失效时间清除本地存储的数据?16.如果不使用脚手架，如果用webpack构建一个自己的react应用17.用 nodejs 实现一个命令行工具，统计输入目录下面指定代码的行数18.package.json 里面 sideEffects 属性的作用19.script 标签上有那些属性20.SPA 中使用 hash 路由时作用和意义21.用户访问页面白屏了，原因是啥如何排查?22.[代码实现]S 中如何实现大对象深度对比23.JavaScript 中处理 100 万数据时确保性能和流畅度的几种方法24.<script> 标签放在 HTML 文档的 <body> 内底部25.虚拟滚动加加载的原理和实现思路26.ts二刷27.promise面试题28.命令行创建 uni-app 项目29.uniapp+v3的小知识点30.ts文件忽略校验31.['',''].join(" ").trim()32.自定义导航栏交互(导航栏左上角按钮+滚动动画效果)33.可视化点击x轴标签实现标签文字切换34.运行vue -V的时候vue : 无法加载文件 C:\Users\jiaho\AppData\Roaming\npm\vue.ps1，因为在此系统上禁止运行脚本35.uniapp+vue2实现下载相关36.深度响应式劫持vue3以下是一套可以用于全站请求耗时统计工具的设计方案，涵盖了从前端到后端的相关环节：
一、整体架构
该统计工具主要分为前端数据采集模块、数据传输模块以及后端数据处理与分析模块，整体架构如下：
前端数据采集模块
负责在用户端（浏览器）收集各个请求的相关信息，包括请求发起时间、请求完成时间、请求的URL、请求类型（如GET、POST等）等。
数据传输模块
将前端采集到的数据发送到后端服务器，确保数据能够安全、可靠地传输，可采用合适的网络协议进行传输，比如HTTP协议。
后端数据处理与分析模块
接收前端传来的数据后，进行存储、整理以及进一步的分析，例如计算平均耗时、各接口耗时分布情况等，同时提供可视化展示接口或报表生成功能，方便查看统计结果。
二、具体实现细节
前端数据采集模块
- 请求拦截
在前端代码中，通过拦截所有的网络请求来获取相关信息。例如，在JavaScript中，如果使用fetchAPI进行网络请求，可以通过封装fetch函数来实现拦截：
const originalFetch = window.fetch;
window.fetch = async function (url, options) {
const startTime = performance.now();
const response = await originalFetch(url, options);
const endTime = performance.now();
const requestInfo = {
url: url,
method: options?.method || 'GET',
startTime: startTime,
endTime: endTime,
status: response.status
};
// 调用数据传输模块发送请求信息
sendRequestInfo(requestInfo);
return response;
};
同样的原理，对于使用XMLHttpRequest进行的请求，也可以通过重写open和send等方法来实现拦截和信息采集。
- 性能指标收集
除了上述基本的请求时间信息，还可以收集更多性能相关的指标，如DOMContentLoaded时间（页面DOM结构加载完成的时间）、load时间（页面所有资源加载完成的时间）等，这些指标可以综合反映页面整体的加载和请求情况。例如：
document.addEventListener('DOMContentLoaded', function () {
const domContentLoadedTime = performance.now();
// 将该时间也作为一种统计信息，可以与请求信息一起发送或单独处理
});
window.addEventListener('load', function () {
const loadTime = performance.now();
// 同样作为统计信息进行后续处理
});
数据传输模块
- 选择传输方式
可以采用POST请求将采集到的数据发送到后端指定的接口。例如，创建一个sendRequestInfo函数来发送数据（基于fetch）：
function sendRequestInfo(requestInfo) {
const data = JSON.stringify(requestInfo);
return fetch('https://your-backend-api-url/collect-data', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: data
});
}
- 数据处理与错误处理
在发送数据前，可以对数据进行一定的压缩处理（如使用pako等库进行gzip压缩），以减少传输的数据量。同时，要设置合理的重试机制，当发送失败时（如网络连接问题），可以按照一定的策略（如每隔几秒重试一次，重试一定次数后放弃）进行重试，确保数据能够尽可能准确地传输到后端。
后端数据处理与分析模块
- 数据接收与存储
在后端（可以是使用Python的Flask、Django等框架，或者Java的Spring Boot等框架）创建对应的接收接口，将前端传来的数据解析并存储到数据库中。以Python的Flask框架为例：
from flask import Flask, request
import json
import sqlite3
app = Flask(__name__)
@app.route('/collect-data', methods=['POST'])
def collect_data():
data = request.get_data()
request_info = json.loads(data)
conn = sqlite3.connect('request_stats.db')
cursor = conn.cursor()
cursor.execute('INSERT INTO requests (url, method, startTime, endTime, status) VALUES (?,?,?,?,?)',
(request_info['url'], request_info['method'], request_info['startTime'], request_info['endTime'], request_info['status']))
conn.commit()
conn.close()
return 'Data received successfully'
这里简单使用了SQLite数据库进行存储，实际应用中可根据需求选择更合适的数据库，如MySQL、MongoDB等。
- 数据分析与统计
定期从数据库中读取数据进行分析，例如计算每个接口的平均耗时、最大耗时、最小耗时等。可以通过编写SQL查询语句或者使用相应的数据库操作框架的功能来实现。以SQLite为例，计算某个接口的平均耗时：
SELECT AVG(endTime - startTime) AS average_time
FROM requests
WHERE url = 'https://specific-url';
还可以统计不同时间段内（如按天、按小时）的请求量和耗时情况，绘制出相应的趋势图表等。
- 可视化展示与报表生成
使用合适的可视化库（如Python的matplotlib、seaborn，或者JavaScript的Echarts等）将分析的数据以直观的图表（如柱状图、折线图等）形式展示出来。另外，也可以生成报表（如PDF格式），汇总关键的统计信息，方便运维人员、开发人员查看全站请求耗时的整体情况以及各接口的性能表现。
三、部署与运维
- 部署环境选择
根据实际的业务规模和流量，选择合适的服务器部署后端服务，同时配置好相应的网络环境、安全防护等措施，确保工具能够稳定运行。 - 监控与更新
设置监控机制，实时关注工具本身的运行状态，如数据传输是否正常、后端服务是否有异常等。并且随着业务的发展和技术的更新，定期对工具进行优化和更新，以适应新的请求类型、更高的流量等情况。
通过以上设计的全站请求耗时统计工具，可以较为全面地掌握全站各个请求的性能情况，为后续的性能优化等工作提供有力的数据支撑。
本文来自博客园，作者：jialiangzai，转载请注明原文链接：https://www.cnblogs.com/zsnhweb/p/18646158
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通