PerformanceObserver 长任务观测与交互优化：Long Task 捕获与切片实践

# 背景与价值 - 长任务（≥50ms）会阻塞主线程，直接影响 INP 与响应性；需观测与治理。 # 观测长任务 ```ts function observeLongTasks() { if (!('PerformanceObserver' in window)) return; const po = new PerformanceObserver((list) => { for (const entry of list.getEntries()) { // entry.duration, entry.startTime, entry.name === 'longtask' reportLongTask(entry.duration, entry.startTime); } }); try { po.observe({ type: 'longtask', buffered: true } as any); } catch {} } function reportLongTask(dur: number, start: number) { // 上报到后端或记录到本地，做分位统计 } ``` # 切片与让步 ```ts async function sliceWork(items: any[]) { const chunk = 50; for (let i = 0; i < items.length; i += chunk) { processChunk(items.slice(i, i + chunk)); // 让出主线程 await new Promise(r => setTimeout(r)); } } ``` # 与任务优先级协同 - 优先使用 `scheduler.postTask` 将后台任务设为 `background`，交互路径设为 `user-blocking`；不支持则用 `requestIdleCallback`。 # 指标验证（Chrome 128/Edge 130） - INP（P95）：交互响应提升 15%–32%。 - 长任务占比：占总时间的比例降低 30%–55%。 - 稳定性：无明显掉帧与卡顿事件；批处理正确性保持。 # 测试清单 - 压力场景：大批量数据处理与高频交互并行仍保持响应。 - 观测准确性：报告的长任务与用户感知卡顿相符。 # 应用场景 - 列表渲染、数据解析、富文本处理、日志/指标聚合与序列化。