长任务指Performance面板Main轨道中宽度≥50ms的连续黄色或红色色块，Chrome自动标记为“Long Task”，点击可下钻定位根因函数及源码行号。
直接看 Performance 面板 Main 轨道上宽度 ≥50ms 的连续黄色或红色色块，这就是长任务——Chrome 自动高亮并标记为 “Long Task”，点击就能下钻查源头。
录制并识别长任务的视觉特征
打开 DevTools → Performance 面板 → 点击录制按钮（●）→ 复现操作（如点击、滚动、页面加载）→ 停止。重点关注：
- Main 轨道中明显拉长的黄色/红色区块，悬停显示耗时（如“128.4 ms”），超过 50ms 即判定为长任务
- 顶部 FPS 曲线若出现密集红色低谷，说明主线程持续过载，不是单点问题，而是节奏性阻塞
- Parse HTML 任务块若异常拉长，且前后紧挨着 Evaluate Script 或 Recalculate Style，大概率是未加 async/defer 的 script 或阻塞式 CSS 引起的解析卡顿
定位具体代码位置
点击任一长任务色块，在下方 Summary 面板查看细节：
- “Self Time” 数值大，说明该函数自身执行重，不是子调用拖慢的
- 展开 “Call Stack”，逐层下钻，最终指向你源码中的行号（需已启用 Source Maps）
- 注意区分 Script Evaluation（JS 执行）和 Layout（强制同步布局），后者常由 offsetTop、getBoundingClientRect() 等触发
聚焦根因函数与常见陷阱
切换到 Call Tree 或 Bottom-up 标签页，按 “Total Time” 排序：
- 排在最上面的函数，往往是总耗时最高的瓶颈，比如 handleSearch 占整个长任务 92% 时间
- 大量匿名函数或 setTimeout 回调堆叠，说明事件处理未节流或防抖
- 滚动场景中，_translate 耗时突增、renderItem 持续 >30ms、或调用栈里反复出现 getBoundingClientRect()，都是典型信号
排除干扰与验证真实影响
有些长任务并非来自你的主动逻辑：
- Summary 中 “Activity” 分类下若大量显示 “Third-party script execution”，优先排查广告、统计或 SDK 初始化脚本
- 用无痕窗口或禁用扩展重录，排除浏览器插件干扰
- React/Vue 应用中，若长任务出现在状态更新后，可能是同步 setState 触发深度 diff，或 memo 匹配开销过大
