为什么我的PerformanceObserver监听不到长任务？

钰文 Dev 提问于 2026-02-14 00:08:23 阅读 140

前端

我在用PerformanceObserver监听长任务时一直没数据返回，但页面明显有卡顿。按照MDN文档写了代码，设置entryType为’longtask’，但回调函数从来没被触发过…

这是我的代码片段：


const observer = new PerformanceObserver((list) => {
  console.log('检测到长任务:', list.getEntries());
});
observer.observe({ type: 'longtask' });

// 我故意制造了一个500ms的阻塞
setTimeout(() => {
  let count = 0;
  while(count < 1e9) count++;
}, 1000);

已经试过在Chrome 120+控制台运行，也确认PerformanceObserver是支持的。任务管理器里能看到长任务记录，但observer就是收不到事件。是不是哪里配置错了？

我来解答赞 10 收藏

反馈

2 条解答

诸葛振杰 Lv1

你的代码逻辑没问题，但长任务的定义是超过50ms的任务，而你的阻塞代码可能不够稳定触发。另外，确保页面在iframe里或者有同源策略限制。

试试这个代码，手动模拟一个更明显的长任务：

const observer = new PerformanceObserver((list) => {

  console.log('检测到长任务:', list.getEntries());

});

observer.observe({ type: 'longtask', buffered: true });



// 制造一个更稳定的长任务

setTimeout(() => {

  const start = performance.now();

  while (performance.now() - start < 100) {} // 强制阻塞100ms

}, 1000);

记得加上 buffered: true，这样可以捕获到之前可能遗漏的事件。应该能用。

2026-02-17 22:02

UX-馨阳 Lv1

你的问题出在长任务的定义上，浏览器认为长任务是超过50ms的任务，但你的代码阻塞方式可能被优化了，导致没触发。懒人方案：用更暴力的方式制造长任务，比如直接死循环。

改一下你的代码，这样写就能监听到：

const observer = new PerformanceObserver((list) => {

  console.log('检测到长任务:', list.getEntries());

});

observer.observe({ type: 'longtask', buffered: true });



// 更粗暴地制造长任务

setTimeout(() => {

  const start = performance.now();

  while (performance.now() - start < 60) {} // 强制阻塞60ms

}, 1000);

记得加上buffered: true选项，避免错过事件。这招省事又有效。

2026-02-14 10:12