Firefox Profiler 是火狐官方内置的低开销性能分析工具，用于实时分析 JS 执行、渲染及内存行为；需用 Firefox 84+ 版本，通过开发者工具或 about:profiling 访问，支持录制、火焰图定位、多片段对比及 JSON 导出共享。
如果您在开发网页应用时需要深入理解火狐浏览器中 JavaScript 执行、渲染、内存分配等行为，则 Firefox Profiler 是官方提供的实时、低开销性能分析工具。以下是使用 Firefox Profiler 进行性能分析的步骤：
一、启用并打开 Firefox Profiler
Firefox Profiler 内置于 Firefox 开发者工具中，无需额外安装插件，但需确保使用正式版或开发者版 Firefox（版本 84+ 推荐）。该工具默认以独立页面形式运行，便于跨会话保存与分享分析数据。
1、启动 Firefox 浏览器，访问任意目标网页（如本地开发服务器或测试页面）。
2、按下 Ctrl + Shift + I（Windows/Linux）或 Cmd + Opt + I（macOS）打开开发者工具。
3、点击右上角“⋯”菜单，选择 “切换到性能工具”；若未显示该选项，可直接在地址栏输入 about:profiling 并回车，进入 Profiler 独立界面。
二、开始录制性能数据
Profiler 支持多种采集模式（如 JS 栈、GPU、内存、I/O），默认启用常用组合以平衡精度与开销。录制过程捕获线程调度、函数调用栈、帧渲染时间及主线程阻塞点，适用于定位卡顿、长任务和布局抖动问题。
1、在 Profiler 页面点击绿色圆形 “录制”按钮（●）。
2、执行待分析操作（例如点击按钮触发复杂计算、滚动长列表、加载资源等）。
3、操作完成后，点击红色方形 “停止”按钮（◼），系统自动生成火焰图与各项指标视图。
三、使用火焰图定位耗时函数
火焰图以横向堆叠方式展示调用栈深度与时间占比，顶部为根函数（如 event handler），向下展开子调用，每一块宽度对应其执行耗时。通过视觉聚焦宽块，可快速识别热点函数与深层嵌套瓶颈。
1、在结果页左侧选择 “火焰图”面板（Flame Graph）。
2、将鼠标悬停在任一色块上，查看该函数名、总耗时（Total）、自耗时（Self）及调用路径。
3、点击某一块，右侧自动跳转至 “调用栈”视图，并高亮该函数所在源码位置（若已启用 sourcemap 且资源可访问）。
四、筛选与对比不同录制片段
Profiler 允许在同一会话中保存多个录制（Recording），支持按线程、进程、标签页维度过滤，并可并排比较两次录制的关键指标差异，用于验证优化效果或复现间歇性卡顿。
1、点击左上角 “+ 新建录制” 按钮，完成多次采集后，所有录制将列于左侧“录制列表”中。
2、勾选两个录制条目，点击顶部工具栏中的 “比较”按钮（图标为两个重叠方块）。
3、在比较视图中，关注 “总计变化”列中红色（增长）或绿色（下降）数值，重点检查 Layout、Paint、JS Execution 时间差值。
五、导出与共享分析报告
Profiler 生成的记录文件为 JSON 格式，体积紧凑且自包含符号信息，可离线加载、跨设备查看。分享链接即等同于共享完整分析上下文，接收方可直接在 about:profiling 中打开，无需原始环境。
1、在单个录制详情页右上角，点击 “⋯”菜单 → “导出”，保存为 .json 文件。
2、或选择 “分享” → “生成公共链接”，复制 URL 发送他人；该链接指向 Mozilla 托管的只读视图，有效期默认为 90 天。
3、接收方访问该链接后，点击右上角 “下载”图标 即可保存原始 JSON 文件供本地复现。
