Firefox DevTools通过Performance、Network、Memory三大面板精准定位性能瓶颈：Performance抓主线程长任务与渲染卡点，Network查资源加载异常，Memory识内存泄漏，结合控制台打点与RUM验证优化效果。
Firefox DevTools 本身是分析工具，不直接“优化”性能，但它能精准定位耗时瓶颈，帮你做出有效优化决策。关键在于用对面板、看懂指标、结合实际代码改。
Performance 面板：抓主线程卡点
- 打开 DevTools（Ctrl+Shift+I 或 Cmd+Opt+I），切换到「性能」标签页
- 点击录制按钮（●），操作页面关键交互（如点击按钮、滚动、加载首屏），录 5–8 秒后停止
- 查看时间轴中的「主线程」火焰图：
- 宽条 = 函数执行时间长，优先排查
- 堆叠高 = 调用链深，注意递归或嵌套过深逻辑
- 标记为「Long Task」（>50ms）的块会直接阻塞响应，是首当其冲的优化目标
- 关注「Layout」和「Paint」阶段：若频繁出现，说明样式计算或重绘开销大，检查是否滥用
offsetTop、getComputedStyle或强制同步布局
Network 面板：查资源加载拖慢
- 切换到「网络」标签，刷新页面，观察瀑布图
- 按「传输大小」或「持续时间」排序，找出大体积或高延迟资源
- 点击单个请求 → 「响应」或「预览」：确认是否返回了预期内容（如图片未压缩、JS 未压缩、字体文件过大）
- 注意「已缓存」状态：若本该缓存却重复请求，检查
Cache-Control头或 Service Worker 是否配置异常
Memory 面板：防内存累积拖垮帧率
- 在「内存」标签页点击「拍摄快照」，操作页面前后各拍一次
- 切换到「比较」模式，重点看
JS Object和DOM Nodes数量是否明显增长 - 若某类对象持续增加且不释放（如事件监听器未解绑、闭包持有 DOM 引用），就是内存泄漏线索
- 对于长期运行的单页应用，尤其要关注组件卸载后是否清理了定时器、订阅、Canvas 渲染上下文等
控制台 + 设置辅助验证
- 在控制台输入
performance.memory（若支持）粗略看 JS 堆使用情况 - 开启「设置」→「高级」→ 勾选「启用 JavaScript 分析器」，让 Performance 面板捕获更细粒度的函数调用
- 使用
console.time('xxx')/console.timeEnd('xxx')在关键逻辑前后打点，与火焰图中标记对齐，确认真实耗时归属
优化不是改完就完事——每次改动后都应重新录制对比，看 Long Task 是否减少、LCP 是否提前、帧率是否稳定在 60fps。Firefox 的 Performance 面板虽界面简洁，但数据扎实，配合 RUM（真实用户监控）指标，就能形成从问题发现到效果验证的闭环。
