可通过chrome network面板定位网页或接口延迟环节：开启录制后刷新页面捕获请求，在timing标签页查看dns、tcp、ssl、ttfb等各阶段耗时，启用preserve log跟踪跨页请求，禁用cache排除缓存干扰。
如果您需要定位网页加载缓慢或接口响应延迟的具体环节，可通过谷歌浏览器的Network面板精确查看每个网络请求在各阶段的耗时分布。以下是具体操作步骤：
一、打开Network面板并启用记录
Network面板是Chrome开发者工具中用于捕获和分析HTTP生命周期耗时的核心模块，其时间轴可细分为DNS查询、TCP连接、SSL协商、请求发送、等待响应、接收响应等阶段，为性能瓶颈定位提供依据。
1、在谷歌浏览器中访问目标网页。
2、按下 Ctrl+Shift+I（Windows/Linux）或 Cmd+Option+I（Mac） 打开开发者工具。
3、点击顶部标签栏中的 Network 选项卡切换至网络监控界面。
4、确认左上角圆形录制按钮为 红色；若为灰色，请点击启动实时捕获。
二、触发并捕获目标请求
为确保捕获到完整且准确的耗时数据，需在Network面板开启状态下执行目标操作，避免因页面已加载完成而遗漏初始请求。
1、若页面已加载完毕，点击浏览器地址栏旁的 刷新按钮 或按 F5 重新加载页面。
2、如需分析用户交互触发的异步请求（如点击按钮提交表单），请在Network面板保持开启状态下执行该操作。
3、观察Overview时间轴中是否出现竖直条纹——每一条代表一个资源请求，堆叠表示并发发起。
三、查看单个请求的详细耗时分布
Timing标签页以可视化方式呈现HTTP事务全链路耗时，包含DNS Lookup、Initial Connection、SSL/TLS Handshake、Request Sent、Waiting (TTFB)、Content Download等关键阶段，单位为毫秒。
1、在Requests Table中点击任一目标请求行（如XHR或JS资源）。
2、在右侧面板中切换至 Timing 标签页。
3、将鼠标悬停于时间轴任意色块区域，即可显示该阶段名称与具体耗时数值。
4、重点关注 Waiting (TTFB) 阶段——该值反映服务器处理时间，若显著偏高，说明后端响应缓慢。
四、启用Preserve log持续跟踪跨页面请求
默认情况下，页面跳转或刷新会清空Network面板历史记录，启用Preserve log可保留整个浏览会话中的全部网络日志，便于分析多步操作下的累计耗时。
1、在Network面板顶部Controls区域，勾选 Preserve log 复选框。
2、执行页面跳转、表单提交或SPA路由切换等操作。
3、返回Network面板，确认此前请求仍保留在列表中，可连续对比不同页面间的请求耗时差异。
五、使用Disable cache排除缓存干扰
浏览器缓存可能导致部分资源显示为“from cache”或极短耗时，掩盖真实网络性能问题。禁用缓存可强制所有请求走真实网络链路，获取原始耗时数据。
1、在Network面板Controls区域，勾选 Disable cache 复选框。
2、刷新页面或重发请求，此时所有资源均不读取本地缓存，状态列将显示实际HTTP状态码（如200而非200 (from memory cache)）。
3、对比启用与禁用缓存下的Timing数据，识别是否存在因缓存掩盖的慢接口。
