console.profile()可手动启动CPU性能分析，需配对调用并进入Performance面板查看标记区间，在Flame Chart和Call Tree中定位耗时根因。
直接用 console.profile() 就能在控制台手动启动 CPU 性能分析，不需要打开录制按钮或依赖页面操作。它本质是给 Performance 面板“打标记”，让后续分析聚焦在你指定的代码段上。
1. 用 console.profile() 精确圈定分析范围
在目标逻辑开始前调用 console.profile('label')，结束时配对调用 console.profileEnd('label')：
- 标签名必须完全一致，否则 Chrome 会忽略
profileEnd或报错 - 避免同名 profile 嵌套，比如两次
console.profile('init')未结束就再起一个，会导致截断或合并 - 适合包裹异步链中的关键同步块，例如：
console.profile('render-list');→ 执行list.map(renderItem)→console.profileEnd('render-list');
2. 查看结果要进 Performance 面板，不是 Console
console.profile() 本身不显示数据，它只是埋点。你需要：
- 打开 DevTools → 切到 Performance 面板
- 点击左上角 ● 录制按钮（或按
Ctrl+E/Cmd+E） - 刷新页面或触发业务逻辑，让带 profile 的代码执行
- 录制结束后，在时间轴下方找标有 “profile: label” 的蓝色横条 —— 这就是你标记的区间
3. 在 Flame Chart 中快速识别热点
点击该蓝色横条，切换到 Flame Chart 标签页，重点关注三类形态：
- 横向最宽的条：单次执行耗时最长的函数（不是调用多，是它自己慢）
-
纵向最深的栈：从事件入口（如
onClick）一路穿透到底层工具函数，说明中间没做裁剪或缓存 -
密集堆叠的同名窄条：比如
formatDate出现上百次，每次不到 1ms，但总和可能超 50ms
4. 结合 Call Tree 定位根因
在 Flame Chart 中点击任一可疑条目，右侧打开 Call Tree，按 Total Time 降序排列：
- 如果某个函数 Self Time 高，说明它内部计算重（比如大循环、正则匹配）
- 如果 Total Time 高但 Self Time 很低，说明它只是中转，耗时全在下游调用里（比如封装了第三方 SDK 的序列化）
- 看到大量
anonymous或<self>，可临时加命名函数或开启 source map 辅助识别
