Firefox DevTools通过Network和Performance面板双路径诊断性能：Network面板用瀑布图分段分析DNS、TCP、SSL、TTFB、下载等网络耗时；Performance面板通过FPS曲线、主线程活动和调用栈定位JS执行、渲染卡顿。
Firefox DevTools 提供了两套互补的性能诊断路径：一套聚焦网络加载过程，另一套深入运行时执行表现。关键不是只看总耗时，而是拆解“哪里慢、为什么慢、能否复现”。
用 Network 面板查加载瓶颈
这是定位页面“打不开”或“白屏久”的第一站：
- 按 Ctrl+Shift+E（Windows/Linux）或 Cmd+Option+E（macOS）直接打开网络监视器
- 勾选左上角红色录制按钮，再刷新页面；务必同时勾选 Disable cache，避免缓存掩盖真实首屏耗时
- 开启瀑布图：右键点击表格顶部任意列名 → 勾选 Timeline，即可看到每条请求的分段耗时条形图
- 重点看颜色含义：深绿色（DNS）、橙色（TCP连接）、紫色（SSL协商）、绿色（TTFB）、蓝色（内容下载）——某一段明显拉长，就是优化入口
- 点击任一请求 → 右侧切换到 Timings 标签页，查看毫秒级数值和官方优化建议（如“DNS 查找耗时过长，考虑使用 DNS 预取”）
用 Performance 面板查运行卡顿
适合分析“交互卡”“动画掉帧”“滚动不顺”等动态问题：
- 按 Shift+F5 打开 Performance 面板（或通过菜单：工具 → Web 开发者 → 性能）
- 点击 Start Recording，然后执行目标操作（例如点击按钮、滚动列表、触发动画），持续 5–10 秒后点 Stop Recording
- 时间轴中重点关注三类指标：FPS 曲线（低于 60fps 的红区表示掉帧）、主线程活动条（长任务会阻塞渲染）、JS 调用栈（展开可定位具体函数耗时）
- 在下方视图中切换到 Call Tree 或 Flame Chart，按“Self Time”排序，找出占用最多 CPU 时间的函数
结合设置提升诊断准确性
默认配置可能干扰判断，建议提前调整：
- 打开 DevTools 设置：按 Ctrl+Shift+O（Windows/Linux）或 Cmd+Shift+O（macOS）
- 勾选 Disable HTTP Cache：确保每次测试都是真实网络行为，而非缓存响应
- 启用 Enable timestamps in Web Console：方便关联控制台日志与性能事件时间点
- 若分析 Vue/React 应用，额外安装对应 DevTools 扩展，并在 Performance 录制中留意框架专属标记（如 Vue 的 render、patch 阶段）
不复杂但容易忽略：一次诊断最好只改一个变量，比如先禁用缓存看 TTFB，再单独测 JS 执行，避免多因素叠加导致归因错误。
