需通过开发者工具网络面板定位http请求各阶段耗时:刷新页面捕获请求,查看timing瀑布图分析ttfb、content download等;对比多请求差异可识别服务端瓶颈或协议限制;启用节流与关闭dns预取能精准复现弱网问题。

当你发现网页加载卡顿、按钮点击后响应迟缓,又无法确定是前端逻辑卡住还是后端接口拖慢了整体体验时,需要直接定位到每个HTTP请求的耗时分布,看清TTFB、内容下载、SSL握手等各阶段是否异常拉长。
打开网络面板并捕获真实请求
在目标网页已完全加载后,按 F12 打开开发者工具,点击顶部标签栏的“网络”(Network)选项卡。此时面板为空——【必须刷新页面才能捕获请求】,否则只会看到旧缓存或空记录。按 F5 或点击地址栏右侧刷新按钮,所有新发起的资源请求会实时出现在下方日志列表中。
若页面有自动轮询或懒加载行为,可勾选左上角“保留日志”(Preserve log),避免刷新后历史请求被清空。
识别高延迟请求并查看时间瀑布图
默认按时间排序,顶部是HTML主文档,往下逐行是JS、CSS、图片及API接口。找到你关心的XHR或Fetch类型请求(通常在Name列显示/api/开头或含json后缀),点击它。
在右侧切换到“计时”(Timing)子标签页,你会看到一条彩色水平瀑布图:灰色是Queuing(排队)、深绿是Stalled(阻塞)、浅绿是DNS Lookup / Connecting / SSL,橙色是TTFB(Time to First Byte),蓝色是Content Download。其中TTFB过长(比如>800ms)说明服务端响应慢或网络链路不稳定;Content Download持续数秒则大概率是返回体过大或带宽受限。
注意:如果某请求的TTFB和Content Download之间出现明显空白(即橙色与蓝色不衔接),说明浏览器在等待响应体流式传输,可能是后端未及时flush、或启用了压缩但未配置好缓冲策略。
对比不同请求的延迟构成差异
按住 Ctrl 键(Windows)或多选几个同域下的API请求,右键→“在新窗口中打开”,即可并排查看多个请求的Timing图。重点比对三项:
一项面向腾讯 EdgeOne(边缘安全与加速平台)的综合能力,涵盖边缘加速(DNS、证书、缓存、规则引擎、L4 代理、负载均衡)、边缘安全(DDoS 防护、Web 防护、Bot 管理)、边缘媒体(实时音视频/图像处理)、边缘开发(Edge Functions、EdgeOne Pages)等多方面功能。当用户提及任何与 EdgeOne / EO 相关的配置、运维、查询或故障排查需求时,请启用此项能力。
① 同一域名下,第一个请求TTFB为320ms,后续请求降到45ms——说明复用连接成功,首屏优化有效;
② 某个POST接口TTFB高达2.1s,而同页面其他GET接口均<100ms——基本可锁定是该接口后端逻辑存在未索引查询或同步IO阻塞;
③ 所有请求的Stalled时间都超过100ms且波动大——极可能是HTTP/1.1并发连接数达上限(Edge默认每主机6条),需检查是否应升级至HTTP/2或启用域名分片。
启用网络节流复现弱网下的延迟恶化
方法一:快速预设档位测试
在Network面板顶部工具栏,点击“无节流”下拉菜单,选择“Slow 3G”。刷新页面,观察原本TTFB为120ms的接口是否飙升至1.8s——若增幅远超带宽下降比例,说明服务端存在未适配弱网的长连接保活或超时设置问题。
方法二:自定义高延迟低带宽组合
选择“自定义”→下载带宽设为80kbps、上传设为20kbps、延迟填入400ms。这种配置能放大TTFB和首包传输时间,特别适合暴露SSL握手慢、TCP慢启动不合理等底层问题。注意:启用后务必确认右上角显示“Offline”未被误勾选,否则所有请求直接失败。
方法三:关闭DNS预取干扰判断
在edge://settings/privacy页面,临时关闭“使用安全DNS”和“预测网络操作以加快页面加载”两项。这两项会在后台提前解析域名或预建连接,掩盖真实DNS查询延迟,关掉后Timing图中的DNS Lookup阶段才反映实际耗时。










