如何在Chrome DevTools中排查超12秒长任务的CPU占用问题？

一、精准定位「animation」长任务 #

• 缩小录制范围：别从页面加载就启动录制，提前打开DevTools，等页面即将触发问题前1-2秒再点击录制按钮，减少无关数据干扰，更容易聚焦到核心长任务。
• 开启高级录制选项：在Performance面板的设置图标（⚙️）里，勾选「Advanced instrumentation」和「Capture stack traces for all events」，这样能捕获到animation任务的深层调用栈，不会只显示表层的「animation」标签。
• 过滤目标线程：在Performance面板的线程列表中，只保留CPU占用高的2-3个线程，隐藏其他无关线程，专注分析这些线程的调用链细节。
• 直接排查动画代码：在Sources面板搜索requestAnimationFrame、setInterval或@keyframes这类关键字，检查是否存在无限循环的动画逻辑——比如回调函数里又触发了新的动画帧，导致任务一直无法结束。

二、解决Perfetto导出大文件失败的问题 #

• 拆分分段录制：不要一次性录完整的12秒长任务，改成每次录3-4秒，分3-4次完成，每个片段体积更小，不会触发字符串长度超限的错误。
• 精简捕获项：在Perfetto的配置界面，关掉不需要的数据源，比如「GPU Trace」「Memory Trace」，只保留「Chrome CPU Profiler」「Chrome Task Manager」这类核心项，减少录制的数据量。
• 裁剪已有录制片段：如果已经有大体积的录制文件，在Chrome DevTools的Performance面板里，拖动时间轴的左右滑块，只选中长任务对应的时间段，再点击「Save selected range」导出裁剪后的片段，体积会大幅缩小。

三、其他CPU高占用排查技巧 #

• 用Chrome任务管理器：从右上角菜单→更多工具→任务管理器，实时查看页面进程的CPU、内存占用，确认是主线程还是Web Worker等子线程导致的高负载，缩小排查范围。
• 跑Lighthouse性能检测：在DevTools的Lighthouse面板运行性能扫描，它会自动识别可能引发长任务的代码，比如未优化的动画、阻塞主线程的同步脚本。
• 断点调试动画：在Sources面板的Event Breakpoints里，勾选「Animation frame fired」，当requestAnimationFrame触发时自动断点，一步步跟踪执行逻辑，找到无限循环的根源。

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