Firefox DevTools 性能优化核心是定位主线程阻塞、冗余绘制、低效动画和JS长任务，通过Performance面板录制分析FPS掉帧、Main Thread高负载色块及频繁Layout/Paint信号，并结合Call Stack、Network和Animations面板交叉验证。
打开并正确录制性能数据
按 Shift + F5 快速打开 Performance 面板（Windows/macOS 均适用），或通过菜单「工具 → Web 开发者 → 性能」进入。
点击「Start Recording」按钮，然后在页面上执行目标操作（比如滚动、点击、页面加载）；操作完成后立即点「Stop Recording」。
⚠️ 注意：提前关闭其他 DevTools 面板（尤其是 Debugger 和 Console 的高亮日志），避免干扰采样精度；建议勾选「Enable JavaScript profiler」获取函数级耗时。
盯住三类典型浪费信号
帧率掉到 60 FPS 以下：顶部 FPS 图表中出现红色尖峰或持续低于 50，说明渲染卡顿。鼠标悬停可查看具体帧耗时，超过 16.7ms 就意味着掉帧。
主线程长时间繁忙（Main Thread 高负载）：时间轴下方的「Main Thread」区域若连续出现宽色块（尤其橙色/红色），代表 JS 执行或样式计算占满 CPU。展开这些色块，能看到具体函数名和耗时。
频繁 Layout 或 Paint：在「Timings」轨道中查找密集排列的「Layout」或「Paint」标记。每秒触发多次强制重排（如读写交替操作 offsetTop 后又改 style），就是典型的浪费源头。
快速定位高开销代码段
在「Call Stack」或「Flame Chart」视图中，寻找：
• 宽度明显超出周围色块的函数调用（例如某次 renderTable() 耗时 80ms）
• 层级过深、重复出现的相同函数（暗示未节流的事件监听器，如 scroll 触发几十次）
• 出现在「Animation」轨道但实际没做硬件加速的 CSS 动画（比如对 top/left 动画，会触发 Layout+Paint）
右键点击可疑色块 → 「Reveal in Debugger」可跳转到对应源码行，方便进一步加断点或优化。
配合 Network 和 Animations 面板交叉验证
切换到 Network 面板，勾选「Disable cache」后刷新，观察是否有大体积资源（如未压缩图片、同步脚本）阻塞主线程；特别留意「Waterfall」列中「Blocking」或「Queueing」时间偏长的请求。
切换到 Animations 面板，检查 CSS 动画是否启用了 will-change 或 GPU 加速（transform / opacity），若显示「Forced reflow」或「Software rasterized」，就说明当前动画正被降级到 CPU 渲染，属于性能浪费。
