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）的热点，指导切片与并行化优化。 示例 ```js 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/