页面卡顿需通过Performance面板捕获长任务并分析火焰图调用栈，结合Sources暂停查看实时栈、console.trace溯源及事件监听器与内存快照交叉验证。
页面卡顿通常意味着主线程被长时间占用，JS 调用堆栈是定位“谁在拖慢页面”的第一手线索。关键不是等报错，而是主动捕获执行中的长任务和深层调用链。
用 Performance 面板抓取真实卡点
这是最直接有效的方式：打开 Chrome DevTools → Performance → 点击录制（●）→ 操作页面复现卡顿 → 停止录制。在火焰图（Flame Chart）中找红色长条（Long Task，>50ms），点击它，在下方的 Bottom-Up 或 Call Tree 标签页里就能看到完整的 JS 调用堆栈——顶部函数耗时最多，逐层往下就是它的调用者，一直追溯到触发源头（比如某个事件回调、定时器或渲染钩子）。
- 重点关注标记为 Script Evaluation 或 Function Call 的区块
- 右键某帧 → “Copy stack trace” 可快速复制路径用于分析
- 勾选 “Hide system frames” 排除浏览器内部代码，聚焦自己的业务逻辑
在 Sources 中手动暂停并查看实时调用栈
当卡顿发生但没明显触发点时，可强制中断执行：在 Sources 面板点击暂停按钮（⏸️），或按 F8。此时 JS 引擎会立即停在当前正在运行的函数上，右侧 Call Stack 面板即刻显示此刻的完整调用路径。
- 栈底（最下面）通常是入口，如
setTimeout回调、requestAnimationFrame、Vue/React 的更新调度器 - 栈顶（最上面）是当前卡住的函数，检查它是否做了大量 DOM 操作、循环或同步计算
- 点击任意栈帧可跳转到对应源码行，方便立刻审查逻辑
对可疑函数加 console.trace 快速溯源
如果怀疑某个函数（比如 renderList、handleScroll）被高频或深层调用，直接在函数开头插入：
立即学习“前端免费学习笔记（深入）”；
将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。
console.trace('? handleScroll triggered');
刷新操作，控制台会输出每次调用的完整路径，包括从哪个事件、哪个组件、哪行代码发起——尤其适合排查框架封装后的“黑盒调用”。
- 比断点更轻量，不中断执行，适合生产环境临时注入（配合动态脚本）
- 配合过滤器（如在 Console 输入
trace）可只看相关日志 - 避免滥用：频繁调用时改用条件触发，例如
if (performance.now() > 1000) console.trace(...)
结合内存与事件监听器交叉验证
有些卡顿源于监听器泄漏或重复绑定。在 Elements 面板选中疑似问题节点（如滚动容器），在 Console 输入：
getEventListeners($0)
查看是否绑定了多个同类型监听器（如十几个 scroll）。再配合 Memory 面板拍快照对比，若 Detached DOM 或闭包持续增长，说明调用栈里某些函数持有不该持有的引用，导致无法回收。
- 特别留意匿名函数、箭头函数监听器——它们在调用栈中显示为
anonymous，但getEventListeners仍能定位绑定位置 - 若发现监听器来自第三方库，可暂时禁用对应模块，确认是否为卡顿根源
