通过Chrome开发者工具Network面板可分析网页资源加载耗时，首先启用并记录网络请求，确保禁用缓存后刷新页面捕获数据；接着在Timeline列查看瀑布流图，定位耗时长的请求；然后点击具体资源进入Timing标签页，分析Queuing、Stalled、DNS Lookup、Connecting、Waiting(TTFB)和Content Download各阶段耗时，识别瓶颈如DNS解析慢或服务器响应延迟；利用过滤器输入关键字或使用类型筛选（如XHR、JS）、大小条件（larger-than:100k）和域名过滤（domain:example.com）快速定位目标资源；最后通过节流功能模拟Slow 3G等弱网环境，观察关键资源加载表现，验证优化效果。
如果您需要分析网页加载过程中每个资源的网络请求耗时，以排查性能瓶颈或优化加载速度，Chrome开发者工具的Network面板提供了详细的时序数据。通过该面板，您可以查看从DNS查询到内容传输完成的完整生命周期。
本文运行环境：MacBook Pro，macOS Sonoma
一、启用并记录网络请求
在开始分析前，必须确保Network面板已正确配置并开始记录页面的网络活动，这样才能捕获完整的请求周期。
1、按下 Cmd+Option+I 快捷键打开Chrome开发者工具，或通过菜单栏选择“更多工具” > “开发者工具”。
2、切换到 Network 面板，确保左上角的圆形录制按钮处于红色点亮状态，表示正在记录网络活动。
3、勾选 Disable cache 选项，防止浏览器使用缓存资源，确保每次加载都发起真实网络请求。
4、刷新页面，观察请求列表中逐渐填充的资源条目，每个条目都包含详细的耗时信息。
二、解读请求时间线（Waterfall）
请求列表下方的“Timeline”列以瀑布流形式可视化每个请求的时间消耗，点击列标题可按耗时排序，便于快速定位最慢的请求。
1、在请求列表中找到目标资源，将鼠标悬停在“Timeline”列的时间条上，会显示详细的分阶段耗时提示。
2、点击某一行的“Timeline”区域，下方会打开一个详细视图，展示从开始到结束的各个阶段。
3、关注时间轴上的颜色分段，不同颜色代表不同的处理阶段，如DNS查询、TCP连接、SSL协商、等待响应和内容下载。
三、分析各阶段具体耗时
每个网络请求的总耗时由多个子阶段组成，通过展开单个请求的详情，可以精确查看每个环节所花费的时间，从而判断瓶颈所在。
1、在请求列表中点击某个资源名称，右侧会显示其详细信息面板。
2、切换到 Timing 标签页，这里以图表形式展示了完整的生命周期。
3、重点关注以下阶段的持续时间：Queuing（排队）、Stalled（停滞）、DNS Lookup（DNS查询）、Connecting（连接建立）、Waiting (TTFB)（首字节时间）和 Content Download（内容下载）。
4、若某个阶段耗时异常，例如DNS Lookup超过几百毫秒，可能表明域名解析存在问题；若Waiting时间过长，则可能是服务器处理缓慢。
四、利用过滤器定位特定请求
当页面请求过多时，使用过滤器可以快速筛选出需要分析的资源类型或特定条件的请求，提高排查效率。
1、在过滤器输入框中输入关键字，如 api 或 .js，仅显示包含该文本的资源。
2、点击 XHR、JS、CSS 等类型按钮，只显示对应类型的请求。
3、使用高级过滤语法，例如 larger-than:100k 查找大于100KB的资源，或 domain:example.com 仅显示来自指定域名的请求。
4、通过 is:from-cache 过滤出从缓存读取的资源，排除它们对网络耗时分析的干扰。
五、模拟弱网环境进行测试
为了评估网站在不同网络条件下的表现，可以通过节流功能模拟慢速网络，观察请求耗时的变化，验证优化效果。
1、在Network面板的控制器区域找到 Online 下拉菜单，默认为“No throttling”。
2、选择预设的网络类型，如 Slow 3G 或 Fast 3G，立即应用网络限制。
3、点击 Add 按钮创建自定义配置，设置具体的下载速度、上传速度和延迟值。
4、刷新页面，观察在模拟弱网下各请求的耗时显著增加，重点关注关键资源的加载顺序和时间。
