谷歌浏览器怎么查看网页加载瀑布图（Waterfall）_谷歌浏览器网络加载分析教程

首先打开Chrome开发者工具的Network面板并记录页面刷新过程，通过瀑布图分析各资源加载的Queueing、Stalled、DNS Lookup、Initial connection、Request sent、Waiting（TTFB）和Content Download阶段，利用过滤和排序功能定位耗时长或阻塞严重的请求，并可通过切换至Slow 3G等网络模式模拟真实用户环境，进而优化加载性能。

如果您尝试分析网页的加载性能，发现资源加载缓慢或顺序不合理，则可以通过查看网络请求的瀑布图来定位问题。以下是使用谷歌浏览器开发者工具进行分析的步骤：

本文运行环境：MacBook Pro，macOS Sonoma

一、打开开发者工具并访问Network面板

此步骤的目的是启动Chrome内置的调试工具，以便捕获和分析网络活动。只有在该工具开启时，浏览器才会记录页面加载过程中的所有请求。

1、在谷歌浏览器中访问您想要分析的网页。

2、按下 F12 键或同时按 Control+Shift+I（Windows）或 Command+Option+I（Mac）打开开发者工具。

3、点击顶部的 Network 标签，进入网络面板。

二、记录并刷新页面加载过程

为了获取完整的加载数据，需要重新加载页面并确保所有请求都被捕获。如果页面已加载完成再打开工具，则可能无法看到初始请求。

1、确认Network面板左上角的录制按钮为红色圆形，表示正在记录；若为灰色，请点击使其变为红色。

2、按下 F5 或点击浏览器刷新按钮重新加载页面。

3、等待页面完全加载后，Network面板将显示所有资源的请求列表及其时间轴。

三、解读瀑布图中的关键阶段

每一条横条代表一个资源的加载过程，其长度表示耗时，颜色区分不同阶段。理解各阶段含义有助于识别瓶颈所在。

1、Queueing：请求被放入队列等待处理，原因可能是更高优先级请求、TCP连接数已达上限（HTTP/1.1限制为6个）或缓存空间分配。

2、Stalled：请求因前述原因之一而阻塞，处于停滞状态。

3、DNS Lookup：浏览器将域名解析为IP地址所需的时间，过长可能表明DNS服务响应慢。

Revid AI

AI短视频生成平台

96

查看详情

4、Initial connection：建立TCP连接的过程，包括三次握手，HTTPS还会包含SSL/TLS协商时间。

5、Request sent：请求头已发送至服务器。

6、Waiting (TTFB)：等待第一个字节返回的时间，反映服务器响应速度和网络延迟。

7、Content Download：下载资源内容所用时间，大文件会显著增加此阶段。

四、利用过滤与排序功能聚焦关键资源

当页面请求众多时，可通过筛选快速定位特定类型资源或耗时最长的请求，提升分析效率。

1、在Filter输入框中键入关键词如 .js、.css 或 img 来过滤脚本、样式表或图片资源。

2、点击请求列表上方的 Waterfall 下拉菜单，选择按 总持续时间、等待时间(TTFB) 或 下载时间 排序。

3、点击任意请求条目，在下方详细信息面板中查看请求头、响应头、预览等内容。

五、模拟不同网络条件进行测试

通过限速功能可模拟移动网络等低速环境，观察网页在真实用户场景下的表现，提前发现潜在性能问题。

1、在Network面板左上角找到 Online 下拉菜单。

2、将其更改为 Slow 3G 或 Fast 3G 以模拟慢速网络。

3、重新加载页面，观察瀑布图变化，重点关注阻塞时间延长和超时情况。

以上就是谷歌浏览器怎么查看网页加载瀑布图（Waterfall）_谷歌浏览器网络加载分析教程的详细内容，更多请关注php中文网其它相关文章！