前端性能监测与 Long Tasks（PerformanceObserver、TBT/INP 关联）

前端性能监测与 Long Tasks（PerformanceObserver、TBT/INP 关联）概述主线程长任务会阻塞交互与渲染。监测并削减长任务可直接改善 INP/TBT 与用户体验。实现要点const po = new PerformanceObserver(list => { for (const entry of list.getEntries()) { // entry.duration > 50ms 视为长任务 report({ type: 'long-task', dur: entry.duration, start: entry.startTime }) } }) po.observe({ entryTypes: ['longtask'] }) 验证方法DevTools Performance 对比优化前后长任务数量与持续时长。将 Long Tasks 与 INP/TBT 上报关联，观察治理收益。灰度优化与 A/B 测试，确认用户端改善。注意事项监控采样与上报节流，避免性能反作用。与代码分片与 Worker 协同，削减重计算与阻塞。结合错误监控与回放定位根因。