如何通过 JavaScript 的 Performance Observer 监控长任务与卡顿？-js教程-PHP中文网

如何通过 JavaScript 的 Performance Observer 监控长任务与卡顿？

狼影

发布： 2025-10-01 13:27:02

原创

592人浏览过

答案：通过PerformanceObserver结合Long Tasks API可监控执行超50ms的长任务，利用duration、startTime和attribution等数据定位卡顿源头，统计频率与耗时并节流上报，有效优化页面流畅度。

如何通过 javascript 的 performance observer 监控长任务与卡顿？

要监控网页中的长任务和卡顿，JavaScript 提供了 PerformanceObserver API，结合 Long Tasks API 可以捕获执行时间超过 50ms 的任务，这些任务通常会导致页面响应变慢或出现卡顿。

启用 PerformanceObserver 监听长任务

通过创建 PerformanceObserver 实例，并指定观察类型为 longtask，可以监听所有触发的长任务。浏览器会在有长任务发生时将记录推送到回调函数中。

示例代码：

if ('PerformanceObserver' in window) {
  const observer = new PerformanceObserver((list) => {
    list.getEntries().forEach((entry) => {
      console.warn('检测到长任务:', {
        duration: entry.duration,
        name: entry.name,
        startTime: entry.startTime,
        // 可进一步上报到服务器
      });
    });
  });

  // 开始监听 longtask 类型的性能条目
  observer.observe({ entryTypes: ['longtask'] });
}

登录后复制

理解 Long Task 数据结构

每个 longtask 条目包含以下关键字段：

立即学习“Java免费学习笔记（深入）”；

AI卡通生成器

免费在线AI卡通图片生成器 | 一键将图片或文本转换成精美卡通形象

查看详情

duration：任务持续时间（毫秒），通常大于 50ms
startTime：任务开始时间（相对于页面加载的高精度时间戳）
name：任务来源，如 self（当前文档）、iframe、worker 等
attribution：部分浏览器支持，可定位具体影响的 iframe 或任务源

利用这些信息可以判断是主线程 JS 执行过久，还是第三方脚本、嵌入内容导致阻塞。

结合指标进行性能分析与上报

你可以将长任务数据用于计算关键性能指标，比如：

统计单位时间内长任务总次数
累计长任务总耗时，评估页面流畅度
识别高频长任务来源（如某个 script 资源）

建议在开发环境打印日志，在生产环境中节流上报，避免频繁发送影响性能。例如：

function sendLongTaskMetrics(tasks) {
  navigator.sendBeacon('/perf/longtask', JSON.stringify(tasks));
}

// 节流处理，每 30 秒汇总一次
let buffer = [];
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach(entry => buffer.push(entry));
  setTimeout(() => {
    if (buffer.length > 0) {
      sendLongTaskMetrics(buffer);
      buffer = [];
    }
  }, 30000);
});

observer.observe({ entryTypes: ['longtask'] });

登录后复制

基本上就这些。只要浏览器支持，PerformanceObserver 配合 longtask 就能有效捕捉导致卡顿的任务，帮助你优化用户体验。

以上就是如何通过 JavaScript 的 Performance Observer 监控长任务与卡顿？的详细内容，更多请关注php中文网其它相关文章！