Firefox DevTools 通过 Network 面板瀑布图精准定位请求瓶颈，将耗时分解为 DNS、TCP、SSL、TTFB 和下载等阶段并以颜色标识；需启用 Timeline 视图、禁用缓存、筛选关键请求，并结合 Timings 标签页与 cURL 复现分析。
Firefox DevTools 分析页面请求耗时分布，核心是用好 Network 面板的瀑布图（Timeline），它把每个请求拆解为 DNS、连接、SSL、TTFB、下载等阶段，并用颜色直观标识——不是只看总时间，而是定位卡在哪一环。
打开并启用瀑布图视图
按 Ctrl+Shift+E（Windows/Linux）或 Cmd+Option+E（macOS）打开 Network 面板，确保左上角红色录制按钮已激活。刷新页面后，所有请求自动列出。右键点击表格顶部任意列标题，勾选 Timeline，瀑布图时间轴列就会显示出来。
识别各颜色对应的真实耗时阶段
每段颜色代表底层网络行为，直接反映瓶颈类型：
- 深绿色：DNS Lookup —— 域名解析慢？检查 DNS 配置或是否用了未缓存的动态域名
- 橙色：TCP Connection —— 连接建立久？可能服务器端口响应慢或网络中间节点不稳定
- 紫色：SSL/TLS Negotiation —— HTTPS 握手耗时高？考虑升级 TLS 版本、启用会话复用或优化证书链
- 绿色：Time to First Byte（TTFB）—— 后端处理延迟？关注服务器逻辑、数据库查询、模板渲染等
- 蓝色：Content Download —— 下载慢？资源体积过大、带宽不足或 CDN 节点未命中
筛选与聚焦关键请求
避免被大量请求干扰，快速定位问题源头：
- 在顶部搜索框输入 .js、api/ 或状态码如 500，缩小范围
- 点击 Size 列排序，优先查体积最大的 JS/CSS/图片是否拖累首屏
- 双击任一请求，右侧打开 Timings 标签页，查看毫秒级分段数值和浏览器给出的优化提示（比如“TTFB 较长，建议优化服务端响应”）
- 右键请求 → Copy as cURL，方便复现或交给后端排查
确保数据真实可比
缓存会让 TTFB 和 DNS 显示为 0，掩盖真实瓶颈：
- 进入 DevTools 设置（F1 或 Ctrl+Shift+O），勾选 Disable HTTP Cache
- 若需模拟弱网，Network 面板右上角下拉选择 3G 或自定义限速
- 开启 Persistent Log（持久日志），跨页面跳转也能保留请求记录，适合分析多步流程
不复杂但容易忽略。真正有用的不是总耗时数字，而是看清哪一段「不该长却很长」——那才是该动手优化的地方。
