Long Tasks API 可识别执行超 50ms 的任务，通过 PerformanceObserver 监听 longtask 条目，定位主线程阻塞源并优化。
Long Tasks API 是浏览器提供的一种机制，用于识别那些执行时间超过 50 毫秒的长任务。这类任务会阻塞主线程，导致页面响应变慢、卡顿甚至无响应，直接影响用户体验。通过该 API，开发者可以精准捕获这些耗时操作，进而优化性能。
理解 Long Tasks API 的工作原理
浏览器将执行时间超过 50ms 的任务标记为“长任务”，因为这个阈值接近用户对交互延迟的感知极限（RAIL 模型建议响应应在 50ms 内完成）。Long Tasks API 通过 PerformanceObserver 监听 longtask 类型的性能条目，每个条目包含任务的开始时间、持续时间以及关联的上下文（如 iframe 或任务类型）。
长任务通常来源于：
注册 PerformanceObserver 监听长任务
要在应用中启用监控，需创建一个 PerformanceObserver 实例，监听 longtask 条目：
const observer = new PerformanceObserver((list) => {list.getEntries().forEach((entry) => {
console.warn('长任务 detected:', {
duration: entry.duration,
startTime: entry.startTime,
name: entry.name,
containerType: entry.containerType // 如 iframe、document 等
});
});
});
// 开始监听 longtask
observer.observe({ entryTypes: ['longtask'] });
这段代码会在每次出现长任务时输出详细信息，帮助定位问题源头。
结合上下文分析并定位瓶颈
获取到长任务数据后，关键是结合应用逻辑进行归因。例如：
- 若 containerType 为 iframe，说明嵌入内容可能存在性能问题
- 持续时间特别长的任务可能涉及大数组处理、同步请求或递归调用
- 多个短任务连续触发也可能累积成阻塞，需关注任务频率
建议将收集的数据上报至监控系统，并与用户行为日志关联，比如在用户点击后是否出现长任务导致交互延迟。
优化策略与预防措施
发现长任务后，可采取以下方式缓解主线程压力：
- 将耗时计算拆分到 Web Worker 中执行
- 使用 requestIdleCallback 或 setTimeout 分片处理任务
- 避免强制同步布局（如读写 DOM 属性交替）
- 延迟加载非关键第三方脚本
同时，在开发阶段集成 Lighthouse 或 Chrome DevTools 的 Performance 面板，主动检测长任务，形成闭环优化流程。
基本上就这些。Long Tasks API 提供了直接观测主线程阻塞的能力，配合合理的监控和拆解手段，能有效提升页面流畅度。关键是持续收集、分析并推动优化落地。
