JavaScript Ajax性能监控核心是标记请求生命周期关键节点并量化耗时，可通过performance.mark/measure打点、XHR事件监听、PerformanceObserver捕获fetch资源、统一封装层集成实现精准轻量可扩展监控。
JavaScript 中 Ajax 接口的性能监控与打点，核心是把请求生命周期的关键节点“标记”出来，并量化耗时，再结合浏览器原生性能 API 或自定义上报机制完成采集和分析。不依赖第三方 SDK 也能做到精准、轻量、可扩展。
用 performance.mark + measure 打关键时间点
这是最直接、标准的打点方式，适合记录单次请求从发起、响应到渲染的完整链路：
- 在 发送请求前 调用
performance.mark('req-start') - 在 收到响应后（onload / then） 立即调用
performance.mark('req-end') - 用
performance.measure('req-total', 'req-start', 'req-end')生成测量记录 - 后续可通过
performance.getEntriesByName('req-total')提取数据，支持过滤、聚合、上报
注意：mark 名称需唯一且语义清晰；measure 的 name 是自定义指标名，便于后续统计；同一页面中重复 mark 会覆盖，如需多次打点建议加时间戳或请求 ID 后缀。
监听 XMLHttpRequest 的原生事件做细粒度监控
XHR 提供了多个可监听阶段，能暴露网络层真实行为：
立即学习“Java免费学习笔记（深入）”；
xhr.addEventListener('loadstart', () => performance.mark('xhr-loadstart'))xhr.addEventListener('progress', e => { if (e.lengthComputable) { /* 记录上传进度 */ } })xhr.addEventListener('load', () => performance.mark('xhr-load'))xhr.addEventListener('error', () => performance.mark('xhr-error'))
配合 performance.measure 可拆解出 DNS 查询、TCP 连接、SSL 握手、首字节（TTFB）、内容下载等隐含耗时（需搭配 resource timing API）。例如：performance.getEntriesByType('resource') 中匹配当前请求 URL，就能拿到完整的网络时间分解。
Fetch 场景下用 PerformanceObserver 捕获资源性能
Fetch 本身不暴露中间状态，但浏览器对每个 fetch 请求都会自动创建 resource 类型的 performance entry。可用 PerformanceObserver 实时监听：
- 初始化 observer 监听
resource类型：new PerformanceObserver(cb).observe({entryTypes: ['resource']}) - 在回调中过滤目标接口 URL：
entries.filter(e => e.name.includes('/api/user')) - 提取关键字段：
e.duration（总耗时）、e.transferSize（传输字节数）、e.startTime等
这种方式无需侵入业务代码，适合统一埋点；但要注意资源条目可能被垃圾回收（默认保留最近 150 条），需及时读取。
统一请求封装层中集成监控逻辑
实际项目中推荐在 Axios、自研 request 库或 Fetch 封装函数里集中处理：
- 请求开始时生成唯一 traceId，打
mark(`${traceId}-start`) - 响应后打
mark(`${traceId}-end`)并调用measure - 捕获 status、method、URL、是否超时、是否重试等上下文，附在上报 payload 中
- 错误时额外记录
mark(`${traceId}-fail`)，便于区分失败路径耗时
这样既保持监控逻辑内聚，又避免每个接口手动打点，还能自然支持 A/B 测试分组、用户设备信息关联等高级分析场景。
