需借助firefox网络瀑布图定位页面加载缓慢环节，依次执行：打开网络监视器、启用瀑布图、识别颜色对应阶段、筛选关键请求、禁用缓存、导出har文件分析。
如果您在火狐浏览器中需要定位页面加载缓慢或资源阻塞的具体环节，则需借助网络瀑布图观察每个请求的完整时序分布。以下是使用Firefox开发者工具分析网络请求时序的详细操作路径：
一、打开网络监视器并启用瀑布图视图
网络监视器是Firefox内置的实时网络请求捕获与可视化工具，其瀑布图以时间轴形式精确展示各阶段耗时，包括DNS查找、连接建立、SSL协商、首字节等待（TTFB）及内容下载等关键节点。
1、按下 Ctrl+Shift+E（Windows/Linux）或 Cmd+Option+E（macOS） 快速打开网络监视器面板。
2、确保左上角“录制”按钮处于开启状态（红色圆点），若为灰色则点击启动捕获。
3、刷新当前页面，所有发出的HTTP/HTTPS请求将自动列于主表格中。
4、右键点击表格任意列标题，在弹出菜单中勾选 Timeline，使瀑布图时间轴列可见。
二、识别瀑布图中各颜色对应的时间阶段
Firefox网络瀑布图采用标准化配色方案对请求生命周期进行分段标记，每种颜色代表一个明确的底层网络行为阶段，可据此快速判断性能瓶颈所在位置。
1、深绿色条段表示 DNS Lookup（域名解析时间），即浏览器将域名转换为IP地址所耗时长。
2、橙色条段表示 TCP Connection（TCP连接建立时间），涵盖三次握手全过程。
3、紫色条段表示 SSL/TLS Negotiation（安全协议协商时间），仅出现在HTTPS请求中。
4、绿色条段表示 Time to First Byte（TTFB），即从请求发出至接收到响应首字节的总延迟。
5、蓝色条段表示 Content Download（内容下载时间），反映实际数据传输耗时，长度正比于资源体积。
三、筛选与聚焦关键请求进行深度分析
当页面请求数量庞大时，需通过过滤与排序缩小分析范围，避免信息过载。Firefox支持按类型、状态码、域名、大小等维度快速定位异常请求。
1、在面板顶部搜索框中输入 .js 或 .css，仅显示脚本或样式资源。
2、点击表格列标题 Size 进行降序排列，优先查看体积最大的资源是否拖慢整体加载。
3、右键单击某一行请求，选择 Copy → Copy request headers 或 Copy response，用于离线比对或提交给后端排查。
4、双击任一请求，右侧展开详情面板，切换至 Timings 标签页，查看毫秒级细分阶段耗时数值及建议优化方向。
四、禁用缓存以获取真实首次加载表现
浏览器缓存会掩盖真实网络耗时，尤其影响TTFB和DNS解析阶段的观测准确性。调试性能问题时必须排除缓存干扰，确保瀑布图反映的是无缓存条件下的原始请求行为。
1、在DevTools任意面板中按下 F1 打开设置面板。
2、勾选 Disable HTTP Cache（when DevTools is open） 选项。
3、关闭并重新打开网络监视器，刷新页面验证缓存已失效——此时所有请求的Size列应显示实际传输字节数而非 (from cache)。
五、导出HAR文件供跨工具协同分析
HAR（HTTP Archive）是一种标准JSON格式，完整记录单次页面加载的所有网络交互细节，适用于在Chrome、WebPageTest或自定义脚本中做二次解析与横向对比。
1、在网络监视器面板右上角点击三个点图标（⋮），打开更多操作菜单。
2、选择 Save all as HAR，保存为本地.har文件。
3、将该文件上传至在线HAR分析平台（如 https://www.softwareishard.com/har/viewer/），即可获得可视化汇总报告、资源大小分布图及潜在问题提示。
