firefox devtools 通过 performance 面板定位主线程长任务（>50ms）、分析调用栈、识别同步 dom 操作等诱因，结合节流/防抖、web worker、缓存引用、requestidlecallback 等优化手段，并用内存面板检测泄漏，最终验证 fps、事件耗时及 fid 改善。
Firefox DevTools 优化页面脚本处理性能，核心是定位主线程瓶颈、减少长任务、避免阻塞性操作，并验证 JS 执行效率。不需要依赖外部工具，靠内置面板就能完成闭环分析。
定位长任务与主线程卡顿
Firefox 的 Performance 面板可直观捕获 JS 执行热点：
- 打开 DevTools（Ctrl+Shift+E 或右键 → 检查元素 → 切换到「性能」标签）
- 点击「开始录制」→ 交互页面（如滚动、点击、加载数据）→ 停止录制
- 查看「主线程」轨道中的黄色长条（JavaScript 执行），长度超过 50ms 即为长任务
- 点击长任务条，右侧会显示调用栈，定位具体函数（如
handleScroll、renderList）和耗时子调用
常见诱因包括：同步 DOM 操作批量更新、未节流的事件监听器、复杂计算未拆分或缓存、递归过深、正则回溯等。
减少脚本执行压力
针对性优化建议：
- 对高频触发逻辑（如
resize、scroll、input）加节流（throttle）或防抖（debounce） - 将大数组遍历、字符串解析等 CPU 密集操作移至 Web Worker（Firefox 完全支持）
- 避免在循环中反复查询 DOM（
document.getElementById等），提前缓存引用 - 用
requestIdleCallback延迟非关键逻辑，确保主线程优先响应用户输入 - 检查
console.log是否大量存在——尤其在循环内，它在 Firefox 中有明显性能开销
检查内存与泄漏影响
脚本变慢有时源于内存持续增长：
- 在「内存」面板中，点击「拍摄快照」两次（间隔几秒），对比对象增长
- 关注
Detached DOM tree、重复创建的闭包、未清除的事件监听器（尤其绑定在全局或长期存活节点上） - 使用「堆分析器」筛选
Function或Array类型，查看是否异常堆积
验证优化效果
每次调整后重新录制性能轨迹：
- 观察长任务数量与总耗时是否下降
- 留意「FPS」轨道是否更稳定（目标 ≥ 60fps）
- 检查「事件处理时间」是否缩短（如
click从 120ms 降到 25ms） - 若使用 RUM 工具（如 Sentry Performance），同步比对 FID（First Input Delay）指标变化
不复杂但容易忽略
