谷歌浏览器开发者工具如何查看网页加载的性能瀑布图？

想定位网页加载慢的根因，最直接的做法是打开Chrome开发者工具的Network面板，捕获真实请求并查看带时间细分的瀑布图。比如，某个资源到底是DNS解析太慢、SSL握手耗时过长，还是服务器响应迟缓、资源下载卡顿——这些信息都能在这里找到答案。

不过要注意，这一步必须在页面刷新前完成，否则初始HTML和关键资源请求不会被捕获到。具体操作是：在Chrome中打开目标网页，按

（Mac）或 （Windows/Linux）调出开发者工具，然后点击顶部标签栏的 选项卡。确认左上角圆形录制按钮为——如果显示灰色，手动点击一次启用实时捕获。

打开Network面板并启动网络记录

只有重新加载页面，Network面板才能记录从HTML解析开始、到所有资源请求完成的完整链路。操作很简单：按下

（Mac）或 （Windows/Linux）强制刷新页面，耐心等待页面完全静止——也就是Network列表不再新增请求、底部状态栏显示“Finished”。这时，所有资源都已经按时间顺序排列在表格中。

需要提醒的是：不要在页面加载完后再打开Network面板，那样只能看到后续的XHR请求或图片懒加载，首屏核心资源的完整瀑布流根本看不到。

查看单个请求的详细瀑布图

总耗时列（Time）只告诉你“一共花了多久”，而真正要诊断瓶颈，得看Timing子面板里的颜色分段。在Network列表中点击任一资源（比如 index.html、app.js 或 banner.jpg），在下方面板中切换到

标签页，观察右侧横向瀑布图：浅灰色代表Queueing/Stalled、橙色代表Initial connection、绿色代表Waiting/TTFB，蓝色则是Content Download。

鼠标悬停在任意颜色区块上，会显示精确到毫秒的阶段耗时。注意：紫色竖线标记脚本动态加载资源的起始点，它右边的资源通常受JS执行顺序影响。

启用细分时间列快速筛查问题

有两种方法可以快速展开细分时间列。方法一：右键点击Network表格任意列头（如Name或Size），在弹出的菜单中勾选

、、、、。方法二：点击Network面板右上角的三个点，选择 ，同样勾选上述字段。

表格会立即新增对应列，各资源在不同阶段的耗时差异一目了然。举个例子：某个JS文件的TTFB高达1200ms，但DNS仅需4ms——问题显然不在域名解析，而在后端响应慢。

按瀑布图排序找出最慢资源

先确保Network面板顶部的

下拉菜单已展开。点击 ，选择 （总耗时）或 （等待首字节时间）。列表会按所选指标从长到短自动重排，排在最前面的几行，就是拖慢整体加载的关键瓶颈资源。

接下来，逐个点击这些资源的Timing瀑布图，对照颜色区块确认问题所在——是连接建立慢、服务端处理慢，还是文件太大导致下载耗时长。