长任务指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 面板查看细节：

codex-cn-bridge

一款AI工具，主要用于通过协议转换与自动配置，使 OpenAI Codex CLI 支持多家国内 AI 模型提供商，适合需要提升相关任务效率的用户。

下载

• “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 匹配开销过大