firefox devtools 无内置实时 cpu 仪表盘，但可通过 performance 工具录制分析主线程活动密度来准确判断 cpu 过载；重点关注火焰图堆叠、fps 低于 60 的区间、scripting 活动条及 summary 中 scripting 耗时占比是否超 50%。
Firefox DevTools 本身没有内置的实时 CPU 占用率仪表盘（不像 Chrome/Edge 的“性能监视器”那样持续显示 CPU% 曲线），但它可以通过 Performance 工具 + 手动录制分析，间接、准确地监控页面运行时的 CPU 使用情况。
关键不是看“瞬时百分比”，而是通过录制期间的主线程活动密度来判断 CPU 是否过载——这才是影响流畅度的真实指标。
? 怎么用 Performance 工具识别 CPU 过载
打开 Firefox DevTools → 切换到 Performance 面板（快捷键 Shift+F5）：
- 点击左上角 ● Record（录制）按钮（或按
Ctrl+E）； - 在页面上进行典型交互（如滚动、点击、动画播放等），持续 5–10 秒；
- 再次点击 ● 停止录制。
录制完成后，你会看到时间轴视图，重点关注：
- 主线程（Main Thread）火焰图：横向是时间，纵向是调用栈。颜色越深、堆叠越高，说明 CPU 消耗越密集；
- FPS 行：低于 60 FPS 的区间（标红）往往对应高 CPU 占用；
- Activity Bars（活动条）：顶部有“Scripting”“Rendering”“Painting”等分类条，拉长且频繁闪烁的 Scripting 条，说明 JS 执行占满 CPU；
- Summary 面板（右下角）：查看 “Scripting” 总耗时占比 —— 若超过 50%，就说明 JS 是主要瓶颈。
✅ 小技巧：录制前勾选 “Enable JavaScript profiler”（在设置齿轮图标里），能更清晰定位耗时函数。
?️ 补充方法：结合浏览器任务管理器粗略参考
Firefox 虽不直接暴露每页 CPU%，但你可以：
- 地址栏输入
about:performance回车； - 页面会列出所有打开的标签页和扩展，显示 “CPU”列（相对占用百分比，非精确值，但可横向对比）；
- 刷新页面或操作后观察该数值跳变，快速筛查哪一 tab 明显拖慢系统。
⚠️ 注意：这个数值是整个进程级估算，不能替代 Performance 录制的精细分析。
? 为什么不用“实时 CPU%”反而更可靠？
因为网页性能卡顿很少源于“CPU 使用率 90%”这种系统级告警，更多是：
- 某个长任务阻塞主线程 > 50ms（导致掉帧）；
- 频繁重排重绘（Layout/Recalc Style）反复触发；
- 事件监听器泄漏导致 DOM 节点 & 监听器数量持续增长。
这些，Performance 录制都能直观呈现，而单纯看“CPU%”容易误判。
不复杂但容易忽略：真正要盯的不是数字，而是主线程是否被长时间独占。
