performance api 不直接优化数据获取速度，但能精准定位 dns、tcp、ttfb、资源加载或 js 执行等瓶颈；需结合 resource entries、user timing 打点、跨域配置及合理采集时机，实现真实耗时分析与优化验证。
Performance API 本身不直接“优化”数据获取速度，但它能精准定位慢在哪——是 DNS、TCP、首字节（TTFB）、资源加载，还是 JS 执行阻塞了数据请求。只有先看清瓶颈，优化才有的放矢。
定位数据请求的真实耗时
很多开发者只看 fetch 或 axios 的 .then 时间，但这只是“JS 层面发起并收到响应”的时间，掩盖了网络底层开销。用 performance.getEntriesByType('resource') 可拿到真实网络链路耗时：
- 确保在
window.addEventListener('load', ...)或document.readyState === 'complete'后调用，避免资源未上报就取数 - 过滤出你的数据接口（如
entry.name.includes('/api/') || entry.initiatorType === 'xmlhttprequest'） - 重点关注
entry.connectStart → connectEnd（TCP 建立）、entry.requestStart → responseStart（TTFB）、entry.responseStart → responseEnd（响应体传输） - 若
connectEnd - connectStart长于 100ms，说明连接复用不足或服务端 TCP 队列积压；若responseStart - requestStart高（TTFB 大），问题大概率在服务端逻辑或 CDN 缓存未命中
识别前端请求调度问题
多个数据请求串行发起、重复请求、或在 DOM 尚未 ready 时就发请求，都会拖慢首屏数据呈现。Performance API 结合 User Timing 可暴露这类逻辑问题：
- 在关键节点打点：
performance.mark('fetch-start')、performance.mark('fetch-end') - 用
performance.measure('fetch-duration', 'fetch-start', 'fetch-end')记录实际执行区间 - 对比多个请求的 measure 时间，看是否存在明显串行依赖（如 A 完成后才发 B）；检查是否在
DOMContentLoaded前就批量发请求，导致阻塞渲染 - 若发现某次 fetch 测量耗时远高于 network tab 显示值，说明 JS 层有大量同步处理（如大数组遍历、JSON.parse 大响应体）拖慢了回调执行
验证优化措施是否生效
改完代码后，不能只靠肉眼判断“好像快了”。用 Performance API 做前后对比：
- 上线前/后，在相同设备与弱网模拟下，采集
getEntriesByType('navigation')[0]中的responseStart - requestStart（TTFB）和domContentLoadedEventEnd - navigationStart（白屏时间） - 对核心接口，记录其 resource entry 的
duration并统计 P95 值，比单次测量更可靠 - 若启用了 HTTP/2 多路复用或预连接（
rel="preconnect"），观察domainLookupStart和connectStart是否显著下降 - 配合 Beacon API 或
fetch(..., { keepalive: true })上报这些指标，形成持续监控闭环，而非仅靠本地调试
注意跨域与采集完整性
第三方 API 或 CDN 资源若未配置 CORS，浏览器会清空其 performance entry 的关键字段（如 duration、responseEnd），造成数据缺失：
- 对所有跨域请求的 script、fetch、img 标签，统一加上
crossorigin属性（哪怕只是crossorigin="anonymous"） - 检查
performance.getEntries()返回的总条目数，若远少于 Network Tab 显示请求数，大概率是跨域未声明导致部分 entry 被裁剪 - 避免高频轮询
getEntriesByType，它会触发浏览器内部性能数据收集，带来轻微但不必要的开销；建议只在关键生命周期钩子（如 load、visibilitychange）中采集一次
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
