如何调试Chrome/Chromium标签页的高CPU与内存占用问题

完全可以通过Chrome DevTools精准定位高CPU消耗的任务，以下是实操步骤：

1. 用Performance面板录制并分析CPU活动 #

• 打开目标页面后，按F12或右键选择「检查」打开DevTools
• 切换到Performance面板，点击左上角的红色录制按钮，录制30-60秒（足够捕捉持续运行的高CPU任务）
• 点击停止录制后，查看生成的火焰图：
  • 聚焦Main线程的调用栈，找那些持续占据时间的长色块（这类就是消耗CPU的核心任务）
  • 点击色块展开完整调用栈，直接定位到对应的JS代码行，排查是否是无限循环、高频定时器（比如不合理的setInterval）或动画脚本导致的

2. 关联Chrome任务管理器精准定位进程 #

• 打开Chrome任务管理器（右上角三个点→更多工具→任务管理器）
• 找到CPU占用高的目标页面进程，右键选择「检查」，直接打开该进程专属的DevTools，避免和其他标签页的进程混淆

3. 辅助排查工具 #

• Memory面板：如果同时伴随高内存占用，切换到Memory面板录制堆快照，排查是否存在未释放的定时器、事件监听或内存泄漏
• Performance Monitor：在DevTools的「更多工具」里打开Performance Monitor，实时监控CPU、内存、帧率等指标，确认高CPU的持续状态和波动情况

这类新闻页面的高CPU通常来自广告脚本、自动轮播组件、高频数据请求轮询这类内容，通过上面的步骤基本能快速定位到具体的代码模块。

内容的提问来源于stack exchange，提问作者Andrew