Firefox DevTools 提供开箱即用的性能分析能力，含Performance（主线程火焰图）、Network（加载瀑布流）、Memory（堆快照比对）三大核心面板，并支持Console与Performance API埋点验证及FPS监控等优化技巧。

Firefox DevTools 提供了一套轻量但精准的性能分析能力，特别适合定位 Web 应用在运行时的卡顿、高 CPU 占用、渲染延迟等问题。它不依赖额外插件，开箱即用，关键在于选对工具、抓准时机、读对数据。

Performance 面板：直接捕获主线程执行火焰图
这是定位 JS 执行瓶颈最核心的入口。

• 打开方式：Ctrl+Shift+E（Windows/Linux）或 Cmd+Option+E（macOS），或通过菜单 → Web Developer → Performance
• 操作流程：
  • 点击“Start recording”（录制按钮）
  • 在页面中复现疑似卡顿的操作（如快速滚动、点击复杂表单、动画触发）
  • 操作结束后立即点击“Stop recording”
• 关键观察点：
  • 时间轴下方的“Call Stack”视图中，筛选 Main 线程，聚焦黄色（JavaScript）和紫色（Rendering）区块
  • 查看长条状的函数调用（宽度大 = 耗时久；高度深 = 调用栈深）
  • 右键某帧可“Zoom to frame”，放大单帧分析布局、绘制、JS 执行耗时分布
  • 注意标有 Recalculate Styles 或 Layout 的长任务——常是 CSS 选择器过重或强制同步布局导致

Network 面板：识别加载阶段的性能拖累
很多“卡顿”实际源于资源加载阻塞或瀑布流不合理。

• 切换到 Network 标签页，刷新页面并开启录制
• 按“Waterfall”列排序，找耗时 > 500ms 的请求
• 关注以下信号：
  • 请求长时间停留在 Queuing 或 Stalled 状态 → 可能受浏览器并发限制或 DNS/SSL 延迟影响
  • DOMContentLoaded（蓝线）与 Load（紫线）间隔过大 → JS/CSS 阻塞解析或执行
  • 大体积 .js 或 .wasm 文件未启用压缩或未设置 preload → 拖慢首屏可交互时间

Memory 面板：排查内存持续增长与泄漏
适用于长期运行页面（如仪表盘、编辑器）出现渐进式变慢的情况。

• 在 Memory 标签页中，点击“Take snapshot”获取堆快照
• 多次操作后（如打开关闭模态框 5 次）再拍一次，切换到 “Comparison” 模式
• 重点看 # New 列为正数的对象类型：
  • 大量未释放的 EventListener → 绑定事件后未 removeEventListener
  • 持续增加的 Closure 或 Array → 闭包持有 DOM 引用或缓存未清理
  • WebAssembly.Memory 实例异常增长 → Wasm 模块内存未主动 grow 控制或释放

Console + Performance API 辅助验证
不用全靠面板盲猜，可主动埋点验证假设：

• 在可疑逻辑前后插入：

  performance.mark('start-process');
  // 你的密集计算或循环
  performance.mark('end-process');
  performance.measure('process-time', 'start-process', 'end-process');

• 刷新后，在 Performance 面板的“Markers”轨道中即可看到自定义标记，精准对齐火焰图位置

小技巧提升效率

• 在 Settings（F1）中勾选 “Enable advanced paint instrumentation” → 可显示更细粒度的渲染合成信息
• 使用 about:config 搜索 devtools.performance.ui.show-fps 设为 true → 在地址栏旁实时显示 FPS
• 禁用 HTTP 缓存（Settings → Advanced settings → Disable HTTP Cache）→ 模拟首次访问真实负载

不复杂但容易忽略