PerformanceObserver 可监听长任务（≥50ms）以优化主线程卡顿，需检查 supportedEntryTypes 支持后创建实例并 observe(['longtask'])，Chrome/Edge/Firefox 支持，Safari 不支持。
PerformanceObserver 是浏览器提供的性能监控接口，可用于监听包括 longtask 在内的多种性能条目。检测长任务（Long Tasks）能帮助你发现阻塞主线程、导致页面卡顿的 JavaScript 执行（持续 ≥ 50ms），是优化交互响应的关键手段。
1. 创建并启用 longtask 类型的 PerformanceObserver
需指定 entryTypes: ['longtask']，并在调用 observe() 前确保浏览器支持（现代 Chrome、Edge、Firefox 支持，Safari 尚未支持 longtask）：
- 先检查
PerformanceObserver.supportedEntryTypes是否包含'longtask' - 创建 observer 实例，回调中接收
PerformanceObserverEntryList - 调用
observe({ entryTypes: ['longtask'] })开始监听
if (PerformanceObserver.supportedEntryTypes?.includes('longtask')) {
const observer = new PerformanceObserver((list) => {
list.getEntries().forEach((entry) => {
console.log('长任务触发：', {
startTime: entry.startTime,
duration: entry.duration,
attribution: entry.attribution // 可选：含调用栈信息（Chrome 122+）
});
});
});
observer.observe({ entryTypes: ['longtask'] });
} else {
console.warn('当前浏览器不支持 longtask 监测');
}
2. 理解长任务的触发条件与典型来源
长任务指在主线程上连续执行 ≥ 50ms 的任务（含 JS 执行、样式计算、布局、绘制等）。常见原因包括：
- 大体积同步 JSON 解析或数组遍历（如
JSON.parse(bigData)） - 未分片的 DOM 批量操作（如一次性插入数百个节点）
- 复杂正则匹配或递归过深的同步逻辑
- 第三方脚本（如分析 SDK、广告代码）执行耗时逻辑
注意：attribution 字段（Chrome 122+）会提供触发该长任务的脚本 URL 和调用位置，对定位问题非常关键。
3. 结合上报与采样控制避免性能开销
频繁记录所有长任务可能影响性能，建议做轻量级过滤和节流上报：
- 只上报
duration ≥ 100ms的严重长任务（默认阈值是 50ms，但可按需提升） - 使用
setTimeout或requestIdleCallback异步上报，避免阻塞当前任务 - 添加简单去重（如 1s 内相同脚本 URL 不重复上报）
- 生产环境建议关闭 console.log，改用埋点服务（如 Sentry、自建日志接口）
4. 注意事项与兼容性补充
- Safari 当前（截至 Safari 17）不支持
longtask类型，无法监听；可降级使用Event Loop Lag间接估算（非标准） - 长任务不会包含跨 iframe 的脚本（除非同源且显式暴露 performance API）
- Worker 中的任务不会触发主页面的 longtask 条目
- 若页面已加载完成才注册 observer，会错过初始化阶段的长任务 —— 建议尽早注入（如 <head> 中 inline script）
