需借助Chrome浏览器Network面板瀑布图分析网页资源加载时间分布与瓶颈环节：先打开开发者工具进入Network面板启用记录，刷新页面捕获完整流程；再点击资源查看Timing子面板的阶段色块，或启用DNS、TTFB等细分列量化耗时；最后通过过滤与排序聚焦高延迟资源定位瓶颈。
如果您希望分析网页资源加载过程中的时间分布与瓶颈环节，则需借助Chrome浏览器内置的Network面板瀑布图功能。以下是实现该目标的具体操作路径：
一、打开开发者工具并进入Network面板
此步骤用于激活Chrome的网络请求捕获机制，只有在Network面板开启且记录启用状态下，浏览器才会完整记录页面加载过程中所有HTTP/HTTPS请求的时序与耗时细节。
1、在谷歌浏览器中打开目标网页。
2、按下F12键，或右键页面任意空白处选择“检查”，调出开发者工具。
3、点击顶部标签栏中的Network选项卡，进入网络请求监控界面。
二、启用记录并刷新页面以捕获完整加载流程
若未主动刷新，已加载完成的页面将无法回溯初始资源请求；启用录制后刷新可确保从HTML解析起始阶段开始捕获全部网络活动。
1、确认Network面板左上角的圆形录制按钮为红色，若为灰色则点击一次启动捕获。
2、按下Ctrl + R（Windows/Linux）或Cmd + R（macOS）强制刷新当前页面。
3、等待页面完全加载完毕，Network列表中将显示所有资源条目，每行右侧的Waterfall列即为对应资源的加载瀑布图。
三、查看单个资源的详细时间分解
瀑布图中横向色块代表不同网络阶段的耗时，仅靠总时间列无法定位具体延迟来源，需展开Timing子面板获取毫秒级阶段划分。
1、在Network列表中点击任一资源名称（如index.css、main.js或banner.jpg）。
2、在下方区域切换至Timing子标签页。
3、观察瀑布图中各颜色区块：浅灰（Queueing）、深灰（Stalled）、橙色（Initial connection）、绿色（Waiting TTFB）、蓝色（Content Download），鼠标悬停可显示精确毫秒值。
四、启用细分时间列以量化各阶段开销
默认表格仅显示总耗时，启用DNS、SSL、TTFB等独立列后，可横向对比多个资源在相同阶段的表现，快速识别共性瓶颈。
1、在Network表格头部右键任意列名（如Name或Size）。
2、在弹出菜单中勾选DNS Lookup、Connection Start、SSL Setup、Waiting (TTFB)、Content Download等选项。
3、表格将新增对应列，每行显示该资源在各阶段所消耗的毫秒数。
五、利用过滤与排序聚焦关键资源
当页面请求数量庞大时，通过类型筛选与耗时排序可跳过无关项，直接定位拖慢首屏渲染的高延迟资源。
1、在Network面板顶部Filter输入框中输入.jpg、.png或script等关键词，快速筛选图片或脚本资源。
2、点击表格头部的Waterfall列标题两次，按加载总耗时从长到短排序。
3、观察排序顶部资源的Timing瀑布图，重点关注Waiting (TTFB)或Content Download阶段是否异常延长。
