firefox network面板是分析网络请求性能的核心工具：先用ctrl+shift+e打开并确保红色录制按钮激活，勾选disable cache后刷新页面捕获真实请求；通过瀑布图颜色区分dns（深绿）、tcp（橙）、ssl（紫）、ttfb（绿）、下载（蓝）各阶段耗时；再用xhr/.js等过滤、time/size排序定位瓶颈，双击查看timings详情及优化提示；启用persistent log和save as har支持跨页追踪与离线分析。
Firefox DevTools 的 Network 面板是查看页面网络请求性能最直接有效的工具，核心在于捕获真实请求、解读时间分布、定位瓶颈环节。
打开并启用网络监控
确保捕获到完整、可复现的加载过程：
- 在目标网页按 Ctrl + Shift + E（Windows/Linux）或 Cmd + Option + E（macOS）打开开发者工具，默认进入 Network 面板
- 确认左上角红色圆形录制按钮已点亮；若为灰色，点击一次开启监听
- 勾选面板顶部的 Disable cache（禁用缓存），避免缓存掩盖真实网络耗时
- 刷新页面（F5 或 Ctrl+R），所有发起的请求将实时记录
识别关键性能阶段（瀑布图）
每条请求右侧的时间轴即“瀑布图”，颜色分段对应底层网络行为：
- 深绿色：DNS Lookup — 域名解析耗时，过高说明 DNS 配置或本地解析慢
- 橙色：TCP Connection — 建立连接时间，受网络质量与服务器响应能力影响
- 紫色：SSL/TLS Negotiation — HTTPS 握手耗时，证书链复杂或 TLS 版本低会拉长此段
- 绿色：Time to First Byte（TTFB）— 从发送请求到收到首字节，反映后端处理速度
- 蓝色：Content Download — 实际下载内容所用时间，与资源体积和带宽直接相关
筛选与聚焦问题请求
面对大量请求，快速缩小分析范围：
- 在顶部过滤框输入 XHR 或 fetch，只看接口请求；输入 .js、.css 或 img 查看静态资源
- 点击列标题 Time 或 Size 排序，优先排查耗时最长或体积最大的请求
- 右键某请求 → Copy → Copy as cURL，便于复现或交由后端验证
- 双击请求，在右侧 Timings 标签页查看毫秒级各阶段数值，系统还会给出优化提示（如“TTFB 过高，建议检查后端逻辑”）
跨页追踪与导出分析
复杂流程常涉及多页跳转或单页应用路由切换：
- 启用 Persistent Log（持久日志）：右键请求列表空白处 → 勾选 “Enable persistent log”，刷新或跳转后历史记录不丢失
- 右键任意请求 → Save all as HAR，导出为 .har 文件，可用在线工具（如 https://www.softwareishard.com/har/viewer/）做离线深度分析
- 结合顶部的 DOMContentLoaded（蓝色竖线）和 Load（紫色竖线）事件标记，判断资源是否阻塞关键渲染路径
