最推荐用 performance api 自动采集,精度高且排除缓存干扰;现代浏览器用 performanceobserver 监听 resource 类型并筛选 fetch 请求,旧浏览器则在请求层手动埋点,上报优先用 sendbeacon 或 keepalive fetch。

最推荐的方式是用浏览器原生的 Performance API 自动采集,它不依赖请求库、精度高、覆盖完整阶段,且能天然排除缓存干扰;旧浏览器兜底才需手动打点。
优先用 PerformanceObserver 监听 resource 类型条目
现代浏览器对每个 fetch/XHR 请求都会自动生成 performance entry(前提是同源或服务端返回 Timing-Allow-Origin)。只需监听 resource 类型,过滤出 fetch 发起的请求即可:
- 检查
entry.initiatorType === 'fetch'确保是 JS 主动发起的请求 - 用
entry.duration获取总耗时(从 fetch 调用到响应体接收完毕) - 拆解关键阶段:DNS(
domainLookupEnd - domainLookupStart)、TCP(connectEnd - connectStart)、TTFB(responseStart - requestStart)、下载(responseEnd - responseStart) - 主动跳过无效条目:状态为
cancel、error,或transferSize === 0(说明命中强缓存)
兼容旧浏览器时在请求层统一手动埋点
针对 IE 或低版本 Safari,需在封装的请求方法(如 axios 拦截器、自定义 fetch wrapper)中处理:
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 请求发起前记录
startTime = Date.now() - 响应成功/失败回调里计算耗时:
duration = Date.now() - startTime - 避免在 Promise 链中直接上报,改用
requestIdleCallback延迟提交,防止阻塞渲染 - 给每个请求加唯一 traceId,便于关联请求与响应,也方便过滤重试请求
上报要轻量、可靠、不丢数
上报本身不能拖慢页面或导致数据丢失:
- 优先用
navigator.sendBeacon(),尤其适合页面卸载前补报未发送的请求耗时 - 非卸载场景可用
fetch(..., { keepalive: true }),保证请求发出后不被中断 - 避免用 XMLHttpRequest 同步上报,会卡死主线程
- 上报字段至少包含:URL、method、status、duration、traceId、是否缓存、客户端时间戳
注意过滤干扰项,否则数据失真
原始数据必须清洗,否则统计结果无业务意义:
- 剔除
entry.transferSize === 0的条目(强缓存,不代表真实网络耗时) - 跳过
entry.encodedBodySize === 0 && entry.decodedBodySize === 0(空响应,可能是探测请求) - 忽略跨域但没配
Timing-Allow-Origin的请求(各阶段时间为 0,无法分析) - 合并重定向链中的多个 entry,只取最终目标 URL 的耗时(或单独标记重定向次数)
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南










