PerformanceObserver 监听 longtask 是运行时捕获长任务的唯一稳定方式，需在 head 内联初始化，结合 navigation 数据定位上下文、mark/measure 锁定业务耗时，并用 sendBeacon 上报验证优化效果。
直接用浏览器原生 Performance API，就能在开发和生产环境里精准捕获、分析并定位长任务——关键不是“有没有卡”，而是“谁在连续占主线程超过 50ms”。
用 PerformanceObserver 主动监听 longtask
这是唯一能在运行时稳定捕获长任务的方式，尤其适合线上监控：
- 尽早执行：把 observer 初始化代码放在 <head> 内联 script 中，避免错过首屏阶段的长任务
- 监听类型必须是 'longtask'，不是 'task' 或 'script'；Chrome 和 Edge 支持，Firefox 需要开启实验性 flag
- 每个 entry 包含 duration（毫秒）、startTime（高精度时间戳）、name（来源标识：'self' 表示当前页，'iframe' 或第三方域名可识别）
- 生产环境建议节流：例如每分钟最多上报 3 条，或只在 duration > 100ms 时全量记录
结合 performance.getEntriesByType('navigation') 定位上下文
单看 longtask 不够，得知道它发生在哪个用户旅程里：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 调用 performance.getEntriesByType('navigation')[0] 获取本次页面加载完整生命周期数据
- 用 entry.domContentLoadedEventEnd - fetchStart 算出白屏到可交互时间，如果这个时间段内密集出现 longtask，说明初始化逻辑过重
- 若 longtask 集中在 loadEventEnd 之后，大概率来自用户交互（如点击后渲染、滚动监听器）
用 mark/measure 锁定业务函数耗时
PerformanceObserver 只告诉你“有长任务”，但不告诉你“哪段业务代码引起的”。这时要用自定义标记：
立即学习“Java免费学习笔记（深入）”；
- 在函数入口打 performance.mark('render-start')，出口打 performance.mark('render-end')
- 立即调用 performance.measure('render-time', 'render-start', 'render-end')，生成可检索的 measure 条目
- 后续通过 performance.getEntriesByType('measure') 拿到精确毫秒值，再比对 longtask 的 startTime，就能确认是否命中同一时段
上报与验证优化效果
改完代码不能凭感觉判断，要用数据闭环验证：
- 上报推荐用 navigator.sendBeacon()，确保页面卸载前也能发出日志，不丢失关键 longtask
- 对比优化前后：同一操作路径下，longtask 总数是否下降、最大 duration 是否从 120ms 降到 ≤40ms、是否被拆成多个 ≤50ms 的微任务
- 配合 Performance 面板火焰图交叉验证：Main 轨道上黄色长条是否变短、变少、不再连续堆叠
