Firefox DevTools性能快照通过录制调用栈、时间分布与主线程活动精准定位JS执行热点；需先关闭无关标签页和扩展、启用“Record allocation stacks”、清空并禁用HTTP缓存；录制后结合火焰图、FPS曲线与长任务列表交叉分析，识别反复出现且影响关键帧的高频低效函数。
Firefox DevTools 的性能快照（Performance Recording）能直接定位 JavaScript 执行热点，核心在于录制运行时调用栈、时间分布与主线程活动，无需猜测——它告诉你哪段代码真正“拖慢了页面”。
录制前的关键准备
确保分析结果真实有效，需先做三件事：
- 关闭无关标签页和浏览器扩展，避免干扰采样
- 在 DevTools 设置中启用 “Record allocation stacks”（记录分配堆栈），这样火焰图里能点开函数看到具体哪行 JS 创建了耗时操作
- 清空缓存并禁用 HTTP 缓存（Network 面板 → 勾选 “Disable cache”），排除资源加载波动对 JS 执行的干扰
生成可解读的性能快照
点击 Performance 面板左上角的 Start recording（或按 Ctrl+Shift+E），然后执行目标交互（比如快速滚动列表、点击按钮触发渲染、输入搜索关键词）。持续 3–5 秒后停止录制。DevTools 会自动生成包含时间轴、帧率、主线程活动和调用栈的完整快照。
重点看中间区域的 Main 线程视图：每一条彩色横条代表一个任务（如 JS 执行、样式计算、布局、绘制），宽度对应耗时，堆叠顺序反映执行依赖关系。
从火焰图精准识别热点函数
切换到下方的 Flame Chart（火焰图）视图，这是分析热点的核心界面：
- X 轴是时间线，从左到右推进；Y 轴是调用栈深度，底部是入口（如
requestAnimationFrame或事件回调），顶部是实际执行的函数 - 宽且红/橙色的横条 = 高 CPU 占用函数，优先排查；例如一个
renderItems函数占满整个 16ms 帧，就说明它严重阻塞渲染 - 右键点击任意函数条 → Reveal in call tree，可跳转到调用树视图，查看该函数被谁调用、耗时占比、子调用开销
- 双击函数名，DevTools 会自动定位到源码（若 sourcemap 正确），直接看到问题行，比如循环内重复 JSON.parse、未节流的 resize 处理器、或深层嵌套的 map + filter 链
结合帧率与长任务交叉验证
不要只盯着火焰图——同步看顶部的 FPS 曲线 和 Long Tasks 列表：
- 当 FPS 掉到 30 以下或出现红色尖峰，拖动时间轴到对应位置，火焰图会高亮该时段的主线程阻塞点
- 右侧的 Long Tasks 面板列出所有 >50ms 的任务，点击任一任务，火焰图自动聚焦到其执行区间，立刻锁定瓶颈上下文
- 若多个长任务都指向同一个工具函数（如
formatDate），说明它是高频低效节点，适合加缓存或预计算
不复杂但容易忽略：真正有效的热点分析，不是找“最宽的一条”，而是找“反复出现、每次都不短、又出现在关键帧里”的函数。它们才是影响用户体验的隐形瓶颈。
