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

--- title: Long Tasks API：主线程阻塞检测与拆分 keywords: - Long Tasks API - PerformanceLongTaskTiming - PerformanceObserver - 阻塞检测 - 拆分策略 description: 使用 Long Tasks API 监测主线程长任务并进行拆分与调度优化，降低交互延迟与卡顿，附采集与归因示例。 categories: - 应用软件 - 编程开发 --- ## 概述 Long Tasks API 通过 `PerformanceObserver` 提供超过 50ms 的长任务条目，可用于定位阻塞来源并指导拆分与延后策略。 ## 用法/示例 ```js 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/