必须进入chrome network面板的timing标签页查看可视化瀑布图才能精准定位api响应缓慢的瓶颈阶段，具体包括dns解析、网络连接、ssl握手、服务器处理（ttfb）和内容下载等环节。
当你发现某个API接口响应缓慢，却无法判断延迟是出在DNS解析、网络连接、SSL握手、服务器处理还是内容下载环节时，必须进入Chrome Network面板的Timing标签页查看可视化瀑布图，才能精准定位瓶颈阶段。
打开Network面板并捕获目标请求
第一步：在Chrome中打开含该API的目标网页，确保页面尚未加载完成或已加载但可重新触发该接口（如点击按钮、切换Tab等）。
第二步：按下 Ctrl+Shift+I（Windows/Linux）或 Cmd+Option+I（Mac）调出开发者工具。
第三步：点击顶部标签栏的 Network 选项卡，进入网络监控界面；确认左上角圆形录制按钮为红色——若为灰色，务必单击一次启用实时捕获。
第四步：若页面已加载完毕，直接按 F5 刷新；若需分析用户交互触发的请求（例如提交表单后发起的fetch），请在Network面板保持开启状态下执行该操作。此时Overview时间轴应出现竖直条纹，每一条代表一个网络请求。
确保捕获完整且干净的请求链路
勾选 Preserve log 是关键前提：SPA路由跳转或页面重定向会清空原有请求记录，不勾选会导致目标API消失无踪。
勾选 Disable cache 同样不可省略：否则浏览器可能返回304或直接读取内存缓存，使TTFB和Content Download阶段失真，误判为“后端快”，实则未走真实链路。
清除所有过滤条件：点击左上角漏斗图标→清空Filter输入框→点击 All 标签→取消勾选 Has blocked cookies、3rd-party 和 Blocked 这三项——它们会静默屏蔽部分XHR/Fetch请求，造成“明明发了请求却找不到”的假象。
定位目标API并查看Timing瀑布图
方法一：在Requests Table中快速筛选
在Name列中肉眼扫视或输入接口路径关键词（如 /api/user/profile）；优先点击状态码为 200 的 XHR 或 Fetch 类型请求行——不要点JS/CSS/Img等静态资源。
方法二：按耗时倒序排列
点击Time列标题两次，使其变为降序（↑箭头朝下），排在最顶部的通常是耗时最长的接口，适合快速揪出性能 outlier。
方法三：右键请求→Copy→Copy request as cURL，粘贴到终端验证是否真能复现——这一步能排除前端代码逻辑错误导致的重复/异常请求干扰。
解读Timing标签页中的各阶段耗时
点击目标请求后，在右侧面板切换至 Timing 标签页，你会看到一条横向瀑布图，从左到右依次为：
DNS Lookup：域名解析耗时。若超过100ms，说明本地DNS配置或公共DNS服务（如8.8.8.8）响应慢；使用内网IP直连可绕过此阶段。
Initial Connection：TCP三次握手耗时。若持续高于50ms，大概率是客户端到服务端之间存在高延迟链路或中间设备（如防火墙、负载均衡）处理缓慢。
SSL/TLS Handshake：HTTPS握手耗时。若超过200ms，需检查证书链长度、是否启用TLS 1.3、服务端密钥交换算法是否陈旧。
Request Sent：浏览器发出请求头和体的时间，通常几毫秒，显著升高说明前端序列化数据过大或阻塞主线程。
Waiting (TTFB)：从请求发出到收到第一个字节的时间——这是服务器端处理的真实反映。若 >300ms，问题一定在后端：数据库慢查询、锁竞争、服务实例过载或中间件（如网关、认证服务）引入额外延迟。
Content Download：接收响应体耗时。若该阶段占比极高，说明返回数据量大（如未分页的列表）、带宽受限或CDN未命中。
将鼠标悬停在任意色块上，即可看到精确到毫秒的数值与阶段说明；注意：TTFB值不包含DNS、TCP、SSL，仅反映服务端纯处理时间。
导出该API的耗时数据供进一步分析
在Console面板中粘贴并回车执行以下代码：
(async () => { const entries = performance.getEntriesByType("resource"); const apiData = entries .filter(e => e.name.includes("your-api-path") && (e.initiatorType === "xmlhttprequest" || e.initiatorType === "fetch")) .map(e => ({ url: new URL(e.name).pathname, duration: e.duration.toFixed(2), ttfb: e.responseStart - e.requestStart > 0 ? (e.responseStart - e.requestStart).toFixed(2) : "N/A", size: e.encodedBodySize })); console.table(apiData); })();
把 your-api-path 替换为你实际的接口路径片段（如 "/v2/order"），代码会自动过滤出匹配的请求，并输出URL、总耗时、TTFB和响应大小；结果可右键表格→Save as CSV导出。
注意：该脚本依赖 performance.getEntriesByType，仅对当前页面生命周期内发起的请求有效；若页面已跳转，需在原始页面上下文执行。
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
