Firefox DevTools提供开箱即用的JavaScript性能分析能力，核心包括Performance面板（Shift+F5/Cmd+Option+T）、FPS图表、瀑布图、调用树和JS火焰图，配合Memory面板可诊断内存泄漏，辅以Console探针验证局部逻辑。
打开 Performance 工具
快捷键最直接：Windows/Linux 按 Shift + F5，macOS 按 Cmd + Option + T。也可以通过右上角菜单 → Web Developer → Performance 进入。确保页面已加载完成，再开始录制，避免混入初始解析干扰。
录制并触发真实操作
点击“Start Recording”（或按 Ctrl+Shift+E），然后执行你要分析的交互——比如点击按钮、滚动列表、切换 Tab。操作尽量贴近用户真实路径，持续 3–5 秒即可。停止后，DevTools 会生成一条时间轴报告。
看懂关键视图
默认展示的是 FPS 图表和瀑布图（Waterfall），这是定位 JS 瓶颈的核心：
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
- FPS 曲线：低于 60 的尖峰说明渲染卡顿，需检查是否在帧内做了太多 JS 计算或强制同步布局（如反复读写 offsetTop）
- 瀑布图下方的主线程轨道：黄色块代表 JS 执行，越宽表示函数耗时越长；鼠标悬停可看到具体函数名和调用栈
- Call Tree 标签页：按“Total Time”排序，排在最上面的就是总耗时最高的函数，通常就是瓶颈所在
- JS Flame Chart（火焰图）：横向宽度 = 执行时间，纵向嵌套 = 调用关系，一眼就能看出哪一层调用链拖慢了整体
配合 Memory 工具查内存问题
如果怀疑是内存泄漏导致后续越来越卡，切换到 Memory 面板：
立即学习“Java免费学习笔记（深入）”；
- 先点“Take Snapshot”拍一张初始快照
- 反复执行疑似泄漏的操作（如打开/关闭弹窗 5 次）
- 再拍一张快照，点击“Comparison”模式，筛选“Objects allocated since last snapshot”，重点关注 Detached DOM 节点或不断增长的闭包对象
用 Console 辅助验证
对于局部逻辑，可直接在控制台中加探针：
-
console.time('fetchData')+console.timeEnd('fetchData')快速测某段代码 -
performance.mark('start')和performance.measure()更精确，支持跨异步任务打点 - 注意：这些输出会出现在 Console 面板，不是 Performance 面板里，但数据可联动分析
