Chrome风扇狂转卡顿且标签页CPU持续超60%，需用Performance面板毫秒级定位：先Cmd+Option+I打开DevTools，设4x CPU节流、勾选Screenshots、关闭无关标签页；再录制8–12秒问题操作，通过火焰图黄色长条与Summary中Self Time定位高耗函数；最后用Memory面板比对快照确认内存泄漏。
当你在浏览某个网页时发现Chrome风扇狂转、操作卡顿，任务管理器里该标签页CPU占用持续高于60%，说明页面中存在未优化的JavaScript执行、频繁重排重绘或内存泄漏等深层问题，必须用Performance面板做毫秒级行为回放才能准确定位。
开启性能录制前的关键准备
按下 Cmd+Option+I（macOS）或 Ctrl+Shift+I（Windows/Linux）打开DevTools，切换到 Performance 标签页。
点击右上角齿轮图标 → 在 CPU 下拉菜单中选择 4x slowdown：这会强制浏览器以四分之一速度运行脚本和渲染，让原本一闪而过的长任务（>50ms）在火焰图中清晰暴露，不设此项可能导致关键帧直接被跳过。
勾选 Screenshots 复选框：它会在录制过程中捕获每一帧画面，后续可对照视觉卡顿点定位对应时间轴位置。
务必关闭所有无关标签页和扩展程序：否则其他进程的CPU干扰会污染当前页面的性能数据，导致火焰图中混入非目标进程的黄色脚本块。
精准复现并录制问题行为
方法一：手动控制录制节奏
点击左上角圆形 ● 录制按钮 → 立即在目标网页执行你观察到卡顿的操作（如滚动长列表、点击筛选按钮、拖拽图表）→ 持续操作 8～12秒 → 点击 ● 停止按钮。操作时间太短无法覆盖完整生命周期，太长则火焰图信息过载难以聚焦。
方法二：刷新并自动录制
点击顶部工具栏的 ▶️ Reload and Record 按钮：它会先强制刷新页面，再自动开始录制整个加载+交互过程。适用于首屏白屏、加载缓慢类问题，但无法控制交互节奏，可能错过用户手动触发的卡顿点。
从火焰图快速定位高耗时源头
录制结束后，面板自动展开四大区域。先看顶部 概览区（Overview）：CPU行中连续出现的高耸 黄色长条 就是JavaScript执行热点，紫色块密集处代表渲染压力大，绿色块堆叠说明绘制开销异常。
将鼠标悬停在某一段高亮黄色块上，底部 摘要区（Summary） 会显示具体函数名、文件路径及耗时——如果看到 self time 占比超过总耗时70%，说明该函数内部存在大量计算或死循环，而非调用子函数所致。
双击该黄色块，火焰图自动下钻到对应调用栈：逐层展开左侧树状结构，找到最底层、self time 最高的函数（通常为匿名函数或 requestIdleCallback 回调），右侧 Bottom-Up 标签页会按耗时倒序列出所有函数，直接定位罪魁祸首。
交叉验证是否存在内存泄漏
回到Performance面板 → 点击右上角三个点 → 选择 More tools → Memory：这个独立面板能捕获堆内存快照。
在疑似泄漏页面上，先点击 Take heap snapshot 拍摄初始快照 → 执行引发卡顿的操作（如反复打开/关闭弹窗）→ 再拍一张 → 点击第二张快照右侧的 Comparison 视图：若发现 Detached DOM tree 或 Closure 类型对象数量激增且未释放，基本确认存在内存泄漏，需检查事件监听器未解绑或闭包引用未清除问题。
导出与共享诊断结果
在Performance面板右上角三点菜单中，选择 Save profile：保存为 .json 文件。该文件包含完整时间线、调用栈、帧率、内存变化等原始数据，可发给前端同事或提交至GitHub Issue进行协同分析。
若需向非技术人员说明问题，点击同一菜单中的 Copy all → 粘贴到文本编辑器中，查找关键词 "longtask" 或 "forced reflow"：前者指向阻塞主线程超50ms的JS任务，后者表示代码中存在触发同步布局计算的属性读取（如 offsetTop + style.width 连用），这两处是90%以上CPU飙升的直接原因。
