红色长条（Long Task）表示主线程单个任务执行超50ms，导致掉帧与卡顿；它反映主线程阻塞而非JS本身慢，常见于强制同步布局、深层DOM查询、未节流事件回调等。
Performance 面板里红色长条到底代表什么
红色长条（标注 Long Task）表示主线程上单个任务执行超过 50ms，直接导致掉帧、输入延迟、动画卡顿。它不是“JS 慢”，而是“主线程被占太久”——哪怕一段只有 3ms 的代码，如果紧挨着 el.style.transform = 'translateX(10px)' 又立刻读 el.offsetHeight，就会触发强制同步布局，把后续所有渲染任务排队堵住。
常见诱因包括：
-
document.querySelectorAll在深层 DOM（depth > 6）中匹配复杂选择器 - 未节流的
scroll或resize回调里调用getComputedStyle - 循环中反复
appendChild单个节点，而不是用DocumentFragment批量插入
火焰图中若 Layout 或 Recalculate Style 占比高，说明问题在样式计算或重排，不是 JS 执行逻辑本身。
怎么录一次有用的滚动/点击性能数据
别点“开始录制”就猛滚鼠标——那样抓不到关键上下文。正确做法是：
立即学习“前端免费学习笔记（深入）”；
- 先清空控制台和 Network 面板，避免干扰
- 在 Performance 面板点录制前，手动触发一次
performance.mark('start-interaction') - 再操作（如点击按钮、开始滚动），操作结束后立即执行
performance.mark('end-interaction') - 停止录制，用
performance.getEntriesByName('start-interaction')和end-interaction定位时间窗口
这样能排除首屏加载、JS 初始化等无关阶段，只聚焦你关心的交互段。移动端尤其要注意：Safari 对 requestAnimationFrame 调度更保守，同一段滚动逻辑在 iOS 上可能天然低 10–15fps，不是 bug，是策略差异。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
Console 里看报错不如直接看 Main 线程阻塞
很多卡顿根本不会报错：Uncaught TypeError 是崩溃，Long Task 是慢性窒息。比如一个 onclick 里先发 fetch 再立刻赋值 location.href，控制台干干净净，但 Performance 面板的 Main 线程上会出现紫色长条——那是 fetch 响应解析 + DOM 更新 + 同步跳转准备全挤在一块儿了。
检查要点：
- 点链接后卡顿？过滤出
navigation类型的 entry，看domContentLoadedEventEnd - fetchStart是否异常大 - 滚动卡？在火焰图里找连续高频的绿色（
Rendering）块，配合 Layers 面板确认是否合成层过多 - 表单提交后界面冻结？查是否有未
await的 Promise 被忽略，导致后续 DOM 操作堆积
别信 console.time，改用 performance.mark 测真实调度延迟
console.time 只返回代码运行耗时，不包含事件循环排队、GC 暂停、强制布局等待时间。一个看似 2ms 的函数，可能让后续 requestAnimationFrame 延迟 80ms 才执行。
更可靠的做法：
- 在目标操作前加
performance.mark('before-action') - 操作后加
performance.mark('after-action') - 用
performance.getEntriesByName('before-action')查实际触发时间戳，对比预期调度时机
如果发现 after-action 时间戳比 before-action 晚 60ms 以上，基本可断定中间有长任务或 GC 干扰。这时候再结合 performance.memory（需 Chrome 启动参数 --enable-precise-memory-info）看 usedJSHeapSize 是否频繁逼近 totalJSHeapSize，确认是否内存压力过大。
真正卡顿的地方，往往藏在“没报错、没警告、看起来很轻”的操作链里。盯着红色长条，比盯着 console 更接近真相。
