"Long Tasks API：主线程阻塞监测与优化"

---

title: "Long Tasks API：主线程阻塞监测与优化"

keywords:

• Long Tasks
• PerformanceObserver
• blocking time
• INP
• TBT

description: "介绍 Long Tasks 的阻塞检测与采集，用 PerformanceObserver 识别长任务来源，结合切片/并行与调度策略降低交互延迟与阻塞时间。"

categories:

• 文章资讯
• 技术教程

---

概述

Long Tasks API 暴露超过 50ms 的主线程阻塞任务，可用于诊断与上报影响交互延迟（INP）与总阻塞时间（TBT）的热点，指导切片与并行化优化。

示例

const obs = new PerformanceObserver(list => {
  for (const e of list.getEntries()) {
    const name = e.name
    const dur = e.duration
  }
})
obs.observe({ entryTypes: ['longtask'] })

工程建议

• 切片与调度：将长计算拆分，使用 requestIdleCallback 或任务调度降低阻塞；对关键交互优先级处理。
• 并行与迁移：将 CPU 密集任务移至 Web Workers；避免主线程 JSON 解析与压缩等重负任务。
• 观测与上报：采集阻塞来源与上下文，结合用户事件监测影响范围。

参考与验证

• MDN Long Tasks 文档：https://developer.mozilla.org/docs/Web/API/Long_Tasks_API
• web.dev 长任务与交互延迟指南：https://web.dev/articles/long-tasks-devtools
• Chrome 性能监测说明：https://developer.chrome.com/docs/devtools/performance/reference/