chrome performance面板可直接定位函数级耗时热点：录制时勾选screenshots、memory、web workers及javascript samples，并开启cpu 4x降速；通过火焰图识别>50ms长任务，再用bottom-up视图按self time定位根因函数，结合call tree与event log交叉验证。
直接用 Chrome Performance 面板就能定位函数级耗时热点，关键在录制后看 Main 线程的火焰图和调用树，不需要改代码、也不依赖 console.time。
录制前的关键设置
确保捕获到足够细粒度的信息：
- 勾选 Screenshots：方便对照卡顿帧与函数执行时段
- 勾选 Memory：判断是否因内存暴涨拖慢 JS 执行
- 勾选 Web Workers 和 JavaScript samples：避免多线程脚本被漏掉
- 在 Recording Settings 中开启 CPU 4x slowdown：放大短时瓶颈，让毫秒级热点更明显
从火焰图快速锁定长任务
火焰图（Flame Chart）是找热点的第一入口：
- 横向宽度 = 函数执行耗时，越宽越可疑；纵向嵌套 = 调用栈深度
- 重点关注持续 > 50ms 的黄色/红色块（即 Long Task），它们会直接导致页面卡顿
- 把鼠标悬停在某一条长条上，底部 Summary 会显示该任务类型（如 Script Evaluation）、总耗时、自耗时（Self Time）
- 双击该条目，自动跳转到底部面板，展开调用细节
用 Bottom-Up 视图精确定位最耗时函数
Bottom-Up 按“自身耗时”降序排列，直指根因：
- 展开后查看 Self Time 占比最高的函数——它才是真正拖慢主线程的“罪魁”
- 右侧列出所有调用它的上级函数（Callers），可反向追溯触发路径
- 如果发现第三方库（如 immutable-js 的
Map.set或List.push）占比较高，说明数据结构操作成了瓶颈 - 点击函数名，左侧 Main 轨道会高亮对应执行片段，并跳转到源码位置（如有 sourcemap）
结合 Call Tree 和事件日志交叉验证
避免误判，尤其当函数被高频调用时：
- 切换到 Call Tree 标签，观察函数在整条调用链中的累计耗时（Total Time）
- 在 Event Log 中查找关联事件，比如 “Animation Frame Fired” 后紧跟着一个 60ms 的 Script Evaluation，基本可断定是 requestAnimationFrame 回调里做了重活
- 若某帧出现 Warning: Long task took XXms，直接点开该帧，再点对应 Task，Bottom-Up 就能立刻看到哪个函数吃掉了大部分时间
