长任务表现为Main轨道上宽度≥50ms的连续黄色或红色色块，Chrome自动高亮并标记为“Long Task”，悬停显示耗时，超50ms即判定为长任务。

直接看 Main 轨道上宽度 ≥50ms 的连续色块，就能定位长任务——这是最核心的判断依据。Chrome 会自动高亮这些区块，并标记为“Long Task”，点击即可下钻分析源头。

识别长任务在时间线中的表现

打开 Performance 面板 → 点击录制（●）→ 复现操作（如点击、滚动、加载）→ 停止。重点关注：

• Main 轨道中明显拉长的黄色或红色色块，鼠标悬停显示耗时（如 “128.4 ms”），超过 50ms 即被判定为长任务
• 顶部 FPS 曲线若出现红色低谷（
• 若多个长任务密集排列（如每帧都有一段黄条），说明主线程持续过载，不只是单点问题

定位具体代码位置

点击任一长任务色块，在下方 Summary 面板中查看详细信息：

• “Self Time” 表示该函数自身执行耗时（不含子调用），数值大说明逻辑本身重
• 展开 “Call Stack” 可逐层看到调用链，最终指向你写的源码行号（需开启 Source Maps）
• 常见源头包括：未节流的 resize/input 处理器、循环中反复读写 DOM（如 offsetTop + style.color）、同步遍历千级数组、第三方 SDK 初始化脚本

结合调用树快速聚焦瓶颈函数

切换到 Call Tree 或 Bottom-up 标签页，按 “Total Time” 排序：

• 排在最上面的函数，往往是总耗时最高的“根因”。比如某 handleSearch 函数占了整个长任务 92% 时间
• 注意区分 “Script Evaluation” 和 “Layout”：前者是 JS 执行，后者是浏览器强制同步布局（常见于 getBoundingClientRect() 后立刻修改样式）
• 若发现大量匿名函数或 setTimeout 回调堆叠，说明事件处理未做防抖/分片

验证是否由第三方或隐式行为触发

有些长任务不来自你主动写的逻辑，而是间接引入：

• 检查 Summary 中 “Activity” 分类下是否有大量 “Third-party script execution” 条目
• 禁用扩展或使用无痕窗口重录，排除广告、统计脚本干扰
• 留意是否在 componentDidMount 或 useEffect 中同步发起请求或渲染大数据列表
• React 应用中，若长任务出现在状态更新后，可能是同步 setState 触发了深度 diff 或昂贵的 memo 匹配