Long Tasks API 是唯一原生检测主线程阻塞≥50ms任务的机制，需手动注册PerformanceObserver监听"longtask"类型，否则performance.getEntriesByType("longtask")返回空数组。
HTML 的 Long Tasks API 是唯一原生支持检测主线程阻塞超过 50ms 任务的机制，但它默认不开启、不自动上报，必须手动注册 PerformanceObserver 并监听 "longtask" 类型 —— 否则你永远看不到真实卡顿源头。
为什么直接用 performance.getEntriesByType("longtask") 返回空数组
因为 Long Tasks API 是“按需启用”的：浏览器只在明确监听后才开始采集数据，不是常驻监控。未调用 observe() 前，getEntriesByType 必然为空。
- 必须在页面加载早期（如
<head>内或DOMContentLoaded前）初始化PerformanceObserver，否则会漏掉首屏关键长任务 - 监听类型必须是字符串
"longtask"，写成"long-task"或"longTask"都无效 - Chrome 84+ 和 Edge 84+ 支持；Firefox 和 Safari 当前不支持，不要依赖它做跨浏览器兜底
- 它只捕获主线程上 ≥50ms 的连续执行（含 JS 执行、样式计算、布局、绘制等），但不区分具体原因 —— 比如是
localStorage.setItem还是innerHTML = hugeString导致的，得靠entry.attribution看调用栈
entry.attribution 能告诉你什么，又不能告诉你什么
这个字段在 Chrome 98+ 中可用，提供触发长任务的顶层调用来源（如 "script"、"timer"、"input"），有时还能带出脚本 URL 和行号；但它不是 100% 可靠：异步回调链过深时会丢失上下文，Web Worker 或微任务中发起的操作也不会出现在这里。
- 常见有效值：
{type: "script", source: "main.js:123"}、{type: "timer", source: "setTimeout"} - 常见无效场景：Promise 回调里执行的重操作，
attribution可能只显示"promise"，没有文件信息 - 别指望靠它定位到某一行
for循环 —— 它给的是入口点，不是火焰图 - 若需更细粒度归因，得配合
console.time()手动打点，或用 DevTools 的 Performance 面板录制
如何避免监听本身变成新长任务
监听回调函数如果做太多事（比如立刻 JSON.stringify(entry) + fetch 上报），它自己就可能被记录为下一个长任务 —— 形成“监控引发卡顿”的负反馈。
立即学习“前端免费学习笔记（深入）”；
- 回调内只做轻量操作：存入内存队列（如
pendingTasks.push(entry)）、触发requestIdleCallback批量处理 - 绝对不要在回调里同步发网络请求；改用
navigator.sendBeacon()异步上报，且限制单次最多上报 3 条 - 对
entry.duration做阈值过滤（例如只处理 ≥100ms 的任务），跳过大量低价值噪声 - 生产环境建议加采样率控制，比如
Math.random() 再处理，避免监控逻辑吃掉过多资源
和 Navigation Timing 或 Resource Timing 混用要注意什么
它们共用同一个 PerformanceObserver 实例，但类型不同。混用时容易因一个类型报错导致整个 observer 停止工作。
- 推荐为
"longtask"单独建一个 observer，不要和"navigation"或"resource"合并在一个实例里 - 监听
"longtask"时，entry.startTime是任务开始时间戳，不是导航开始时间，别拿它去减performance.timing.navigationStart - 所有 timing API 的时间戳都基于
performance.timeOrigin，跨 iframe 时注意 origin 差异可能导致时间不可比 - 如果页面启用了
document.domain修改，部分浏览器会禁用Long Tasks API，此时 observer 不报错但也不触发回调
真正难的不是接入 API，而是判断哪些长任务值得干预：一个 60ms 的 localStorage 写入在低端安卓机上可能是瓶颈，在桌面 Chrome 里却可忽略；attribution 给出的脚本路径也可能是打包后的 bundle，需要 sourcemap 映射才能回溯到源码 —— 这些上下文，API 自己不会告诉你。
