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

必须打开Chrome开发者工具Network面板并刷新页面才能捕获完整加载瀑布图；启用Timing细分、添加时间列、按Duration或TTFB排序可精准定位DNS、SSL、TTFB或下载等各阶段瓶颈。

当你需要定位网页加载慢的具体原因——比如是DNS解析太慢、SSL握手耗时过长，还是服务器响应迟缓、资源下载卡顿——就必须打开Chrome开发者工具的Network面板，捕获真实请求并查看带时间细分的瀑布图。

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

这一步必须在页面刷新前完成，否则初始HTML和关键资源请求将不会被捕获。

在Chrome中打开目标网页 → 按 Command+Option+I（Mac）或 Control+Shift+I（Windows/Linux）调出开发者工具 → 点击顶部标签栏的 Network 选项卡。

确认左上角圆形录制按钮为红色；若为灰色，点击一次启用实时捕获。

刷新页面获取完整加载数据

只有重新加载，才能让Network面板记录从HTML解析开始的全部资源请求链路。

按下 Cmd+R（Mac）或 Ctrl+R（Windows/Linux）强制刷新页面 → 等待页面完全静止（Network列表不再新增请求、底部状态栏显示“Finished”）→ 此时所有资源已按时间顺序排列在表格中。

【注意】不要在页面已加载完后再打开Network面板——那样只能看到后续XHR或图片懒加载，看不到首屏核心资源的完整瀑布流。】

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

总耗时列（Time）只告诉你“一共花了多久”，而真正要诊断瓶颈，得看Timing子面板里的颜色分段。

在Network列表中点击任一资源（如 index.html、app.js 或 banner.jpg）→ 在下方面板中切换到 Timing 标签页 → 观察右侧横向瀑布图：浅灰色（Queueing/Stalled）、橙色（Initial connection）、绿色（Waiting/TTFB）、蓝色（Content Download）。

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

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

方法一：右键点击Network表格任意列头（如Name或Size）→ 在弹出菜单中勾选 DNS Lookup、Connection Start、SSL Setup、Waiting (TTFB)、Content Download。

方法二：点击Network面板右上角三个点 → 选择 Columns → 勾选上述字段 → 表格将立即新增对应列，可直观对比各资源在不同阶段的耗时差异。

这时你一眼就能看出：某个JS文件TTFB高达1200ms，但DNS仅需4ms——问题不在域名解析，而在后端响应慢。

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

第一步：确保Network面板顶部的 Waterfall 下拉菜单已展开。

第二步：点击 Waterfall → 选择 Duration（总耗时）或 TTFB（等待首字节时间）。

第三步：列表将自动按所选指标从长到短重排，顶部几行就是拖慢整体加载的关键瓶颈资源。

第四步：逐个点击它们的Timing瀑布图，对照颜色区块确认是连接建立慢、服务端处理慢，还是文件太大导致下载久。