直接用 Performance 面板录制操作即可定位性能瓶颈：录制后查看火焰图中的长任务（>50ms）、分析调用栈、结合 Main 视图跳转源码，并通过高级设置（Memory、Screenshots、Web Workers）提升诊断精度。
直接用 Performance 面板录一段操作，就能看到哪段 JS 耗时最长、是否卡主线程、有没有频繁重排重绘。
打开 Performance 面板并录制真实操作
- 按 F12 打开 DevTools，切换到 Performance 标签页
- 点击左上角圆形录制按钮（●），然后在页面上执行要分析的操作（比如点击按钮、滚动、搜索）
- 操作完成后立刻再点一次按钮停止录制
- DevTools 会自动生成火焰图（Flame Chart）和详细指标
重点看火焰图里的长任务（Long Tasks）
- 主线程上持续超过 50ms 的黄色或红色块就是“长任务”，容易导致页面卡顿
- 把鼠标悬停在这些区块上，底部 Summary 会显示具体耗时、类型（如 Script Evaluation、Layout、Paint）
- 双击某一项，切换到 Bottom-Up 或 Call Tree，就能看到调用栈——最顶部的函数通常是性能瓶颈源头
结合 Main 线程视图定位 JS 具体位置
- 在火焰图下方的 Main 区域，展开时间轴，找到耗时高的函数调用
- 点击对应条目，右侧 Sources 面板会自动跳转到源码行，并高亮执行点
- 如果是第三方库代码，可右键选择 “Blackbox script” 忽略它，聚焦自己的逻辑
开启高级追踪提升诊断精度
- 点击右上角 ⋯ → Recording Settings
- 勾选 Memory：查看堆内存是否随操作持续增长（提示内存泄漏）
- 勾选 Screenshots：对比帧截图，确认卡顿是否伴随渲染异常（比如画面撕裂、静止）
- 勾选 Web Workers：如果用了多线程，能一并分析 Worker 内的执行情况
不复杂但容易忽略
