Long Tasks API：主线程阻塞检测与拆分

---

title: Long Tasks API：主线程阻塞检测与拆分

keywords:

• Long Tasks API
• PerformanceLongTaskTiming
• PerformanceObserver
• 阻塞检测
• 拆分策略

description: 使用 Long Tasks API 监测主线程长任务并进行拆分与调度优化，降低交互延迟与卡顿，附采集与归因示例。

categories:

• 应用软件
• 编程开发

---

概述

Long Tasks API 通过 PerformanceObserver 提供超过 50ms 的长任务条目，可用于定位阻塞来源并指导拆分与延后策略。

用法/示例

new PerformanceObserver(list => {
  for (const e of list.getEntries()) {
    console.log('longtask', e.duration, e.name || '')
    // e.attribution 可用于部分环境的归因信息
  }
}).observe({ type: 'longtask', buffered: true })

工程建议

• 将非关键计算分片或迁移至 Worker，避免帧内阻塞。
• 与 scheduler.postTask 协作，为后台任务设低优先级与延迟。
• 在构建与运行时对第三方脚本进行审计与限制，减少不可控阻塞。

参考与验证

• MDN：Long Tasks API — https://developer.mozilla.org/docs/Web/API/Long_Tasks_API
• WICG：Long Tasks — https://w3c.github.io/longtasks/