需借助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）。
