首先打开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服务响应慢。
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）_谷歌浏览器网络加载分析教程的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/195745.html
微信扫一扫 
支付宝扫一扫 
