DevTools 长任务调试
用 Performance 面板定位主线程长任务，并把卡顿症状追溯到脚本、布局、渲染或数据处理根因。
#type / concept
#status / growing
#tech / dev / frontend
#platform / browser
#resource / chrome-devtools
[!info] related notes
- 所属 MOC: DevTools Performance MOC
- 前置概念: 长任务优化, 浏览器时间切片与协作式调度
- 并列概念: 火焰图, CPU 与 Network Throttling
- 关系笔记: Performance 面板, 页面卡顿排查路线
DevTools 长任务调试
一句话定义
长任务调试是在 Performance 面板里找出那些持续太久、阻塞主线程、让交互发卡的任务。
核心内容
典型症状
- 点击后迟迟没响应
- 输入卡顿
- 滚动掉帧
- 页面像“卡住了一下”
调试动作
- 录制真实交互
- 找长任务块
- 看火焰图里是 JS、布局还是绘制占大头
- 回到源码或结构层修复
边界与易混淆点
- 有长任务不代表每次都能感知到卡顿，要结合交互时机看
- 优化目标不是单纯“消灭红块”，而是减少对用户交互的阻塞