前端与浏览器 / 进阶

主线程长任务排查：不要只看一条红色火焰图

建立可复现的性能录制流程，识别长任务中的脚本执行、强制布局、垃圾回收和第三方代码。从用户操作出发，把脚本、样式和渲染成本归因到具体功能。

10 分钟Long Tasks · DevTools · INP · Profiling

读火焰图的顺序

先找到与用户输入对应的 Event，再看从事件开始到下一次绘制之间有哪些任务。超过 50ms 的任务会标记长任务，但一个 40ms 任务在低端设备上也可能很慢。向下展开调用栈判断是业务函数、框架更新还是第三方脚本；再检查 Recalculate Style、Layout 和 Paint 是否由脚本变更触发。

EXAMPLE / 01Long Tasks

const observer = new PerformanceObserver(list => {
  for (const entry of list.getEntries()) {
    if (Math.random() < 0.01) {
      report({ type: 'longtask', duration: entry.duration, path: location.pathname });
    }
  }
});
observer.observe({ type: 'longtask', buffered: true });

修复通常有三条路

删除不必要的工作：减少渲染节点、避免重复解析、缓存纯计算。把工作拆开：循环按时间预算分片，让浏览器有机会处理输入和绘制。移动工作：把可序列化的 CPU 计算放进 Worker，但要把消息复制和调度成本算进去。

最后回到真实页面检查

修复方向是删除、拆分或移出主线程