Chrome DevTools Performance 面板可精准定位 JS 卡顿：录制操作后，聚焦主线程长任务（>50ms 红条）、Bottom Up 排序耗时函数、火焰图识别计算热点，并结合 Memory 面板对比快照排查内存泄漏。
直接用 Chrome DevTools 的 Performance 面板就能看清 JS 执行卡在哪——重点看主线程上的长任务、调用栈深度和帧率波动，而不是靠猜。
一、快速录制并捕获真实执行过程
打开目标页面 → 按 F12 或 Ctrl+Shift+I（Mac 为 Cmd+Option+I）唤出 DevTools → 切到 Performance 面板 → 点击左上角红色 ● 录制按钮 → 在页面上执行你想分析的操作（比如点击按钮、滚动、加载数据）→ 再点 ● 停止录制。
注意：建议先清空缓存（勾选右上角“Disable cache”），并在隐身模式下操作，避免插件干扰。
二、聚焦主线程中的“长任务”与函数耗时
录制完成后，时间轴下方会显示 Main 区域，这就是 JavaScript 主线程的执行快照。重点关注：
立即学习“Java免费学习笔记（深入）”；
- 红色长条：表示 >50ms 的 Long Task，是造成卡顿的主因；鼠标悬停可看到具体函数名和耗时
- 堆栈展开：点击某段高亮区域 → 右侧 Summary 中切换到 Bottom Up 视图 → 按 “Total Time” 排序，排第一的就是最耗 CPU 的函数
- 源码定位：在 Bottom Up 或 Call Tree 中点击函数名 → Sources 面板会自动跳转到对应行，方便立刻查看逻辑
三、用火焰图直观识别执行热点
火焰图（Flame Chart）在 Main 轨道下方，默认开启。它的关键读法是：
- 横轴 = 时间，纵轴 = 调用栈深度；越宽的色块，代表该函数占用 CPU 时间越长
- 黄色/红色区块通常对应密集计算（如循环、JSON.parse、复杂渲染）；蓝色多为 DOM 操作或样式计算
- 连续出现多个同名函数宽条（如
updateList），说明它被高频或重复调用，值得检查是否可节流、缓存或懒执行
四、结合内存快照排查隐性拖慢因素
有些性能问题不体现在 CPU 耗时上，而是内存压力导致 GC 频繁暂停脚本。这时要切到 Memory 面板：
- 点击 Take Heap Snapshot 拍摄快照（建议操作前、操作中、操作后各拍一次）
- 切换到 Comparison 视图 → 选择两个快照对比 → 关注 Detached DOM trees 和持续增长的构造函数（如 Array、Object、闭包）
- 若发现大量
HTMLDivElement或EventListener在 Detached 状态下仍被引用，大概率存在事件监听器未移除或 DOM 节点未清理的问题
不需要背命令，也不用装额外插件。录一次、看一眼火焰图、扫一遍 Long Task、比两份内存快照——多数 JS 执行瓶颈就暴露了。
