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

背景与价值长任务（≥50ms）会阻塞主线程，直接影响 INP 与响应性；需观测与治理。观测长任务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) { // 上报到后端或记录到本地，做分位统计 } 切片与让步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%。稳定性：无明显掉帧与卡顿事件；批处理正确性保持。测试清单压力场景：大批量数据处理与高频交互并行仍保持响应。观测准确性：报告的长任务与用户感知卡顿相符。应用场景列表渲染、数据解析、富文本处理、日志/指标聚合与序列化。