Chrome DevTools Performance面板可直接定位长任务函数栈：录制用户卡顿操作后，在Main轨道找≥50ms色块，点击查看Call Stack或Bottom-up视图锁定耗时函数，再通过console.time和代码注释验证根因。
直接用 Chrome DevTools 的 Performance 面板就能定位长任务对应的具体函数栈，不需要额外插件或代码埋点——关键在于录制操作后正确解读主线程火焰图和调用树。
录制时要模拟真实用户行为
打开 DevTools → 切到 Performance 标签 → 点击 ● 录制按钮 → 在页面上完成一次引发卡顿的操作（比如点击搜索、快速滚动、展开折叠面板）→ 再点 ● 停止。确保操作过程中有明显卡顿感，否则可能录不到典型长任务。
在 Main 轨道里找红色/黄色长条
录制结束后，向下滚动到 “Main” 轨道（标着主线程的那一行），横向扫视：宽度 ≥50ms 的连续色块就是长任务，通常呈深黄或橙红。鼠标悬停上去，会显示耗时、起止时间、任务类型（如 “Function Call” 或 “Evaluate Script”）。
- 点击该色块，右侧 Summary 面板自动展开，显示 “Call Stack” 标签页
- Call Stack 里从上到下是执行顺序：最上面是触发点（比如 click 事件处理器），往下逐层展开，直到最底层的耗时函数（比如某个 for 循环或 JSON.parse）
- 每行都带文件名和行号，点一下就能跳转到 Sources 面板对应位置
用 Bottom-up 视图快速锁定“真凶”
如果长任务嵌套深、调用链杂乱，直接看 Call Stack 容易迷失。切换到面板下方的 “Bottom-up” 标签：
立即学习“Java免费学习笔记（深入）”；
- 按 “Total Time” 降序排列，排在最顶的函数就是总耗时最高的那个
- 展开它，能看到它被哪些上层函数调用（例如：handleResize ← window.addEventListener ← init）
- 特别注意标着 “(program)” 或匿名函数的条目——它们常是未命名事件处理器或立即执行函数，需结合上下文确认来源
配合代码验证与复现
光看堆栈还不够，得验证是否真由这段逻辑引起：
- 在 Sources 面板中打开对应文件，找到堆栈指向的函数，在开头加 console.time('suspect')，结尾加 console.timeEnd('suspect')
- 刷新页面、重放操作，控制台输出耗时是否与 Performance 中一致
- 临时注释掉疑似逻辑（比如删掉一段 DOM 遍历），再录一次——若长任务消失，基本可确认根因
