前端实时测速需用performance.now()获取微秒级单调时间戳，封装timedFetch自动注入duration字段，并按TTFB、下载、解析分段评估，结合UI变色反馈与阈值告警实现轻量监控。
在前端实时测速并评估接口响应时间，核心是利用 performance.now() 精确记录请求发起与响应完成的时间差，并结合业务逻辑做合理归类与反馈。不依赖后端打点，完全由前端自主采集、计算和呈现。
用 performance.now() 替代 Date.now() 获取高精度时间
Date.now() 只精确到毫秒，且易受系统时钟调整影响；performance.now() 提供微秒级（实际通常精确到 0.1ms）单调递增时间戳，是前端测速的首选。
- 在
fetch或axios发起前立即调用performance.now()记录开始时间 - 在
.then()或response回调中再次调用，计算差值即为真实响应耗时 - 注意：需确保请求真正“完成”——对流式响应或大文件下载，应监听
response.body读取完毕，而非仅收到 headers
封装通用请求测速器，自动注入耗时指标
避免每个接口手动打点，可封装一个轻量请求函数，在返回 Promise 前注入 duration 字段：
async function timedFetch(url, options = {}) {
const start = performance.now();
try {
const res = await fetch(url, options);
const end = performance.now();
// 将耗时挂载到响应对象上（不影响原有结构）
res.duration = end - start;
return res;
} catch (err) {
const end = performance.now();
throw Object.assign(err, { duration: end - start });
}
}使用时直接获取：const res = await timedFetch('/api/user'); console.log(res.duration);
立即学习“Java免费学习笔记（深入）”；
按场景分类评估：区分网络层、服务层与前端解析开销
单一时长不能说明全部问题，建议拆解关键节点：
-
TTFB（Time to First Byte）：从发送请求到收到第一个字节，反映网络+服务端处理速度。可通过
res.headers.get('date')或performance.getEntriesByName(url)[0]（需开启timing-Allow-Origin）获取 -
Download Time：接收完整响应体耗时，用
response.arrayBuffer().then(() => performance.now())测量 -
JSON Parse Time：对大 JSON 响应，
JSON.parse()可能占显著耗时，应单独计时
例如：TTFB 80ms + Download 120ms + Parse 45ms = 总耗时 245ms，可判断瓶颈在传输还是前端解析。
可视化与阈值告警：让耗时“看得见、有反馈”
单纯记录数字没意义，需结合 UI 实时反馈：
- 在请求按钮旁显示「⏱️ 234ms」，绿色（<200ms）、黄色（200–800ms）、红色（>800ms）动态变色
- 对慢请求（如 >1s）自动上报日志：
navigator.sendBeacon('/log', JSON.stringify({url, duration, timestamp})) - 页面底部加迷你性能面板，汇总最近 10 次 API 的 P50/P90 耗时，支持点击展开详情
无需复杂图表库，几行 CSS + <span> 即可实现轻量实时监控。
