前端监控JavaScript_性能指标采集-js教程-PHP中文网

前端监控JavaScript_性能指标采集

幻影之瞳

发布： 2025-11-29 20:20:02

原创

761人浏览过

前端监控需采集JS错误、长任务、内存使用等关键指标，通过error事件、PerformanceObserver、performance.memory等API实现，并结合sendBeacon与采样策略上报，兼顾性能与数据完整性。

前端监控javascript_性能指标采集

前端监控中，JavaScript 性能指标的采集是了解页面运行时行为、排查卡顿和优化用户体验的关键环节。通过收集 JS 执行过程中的关键数据，可以及时发现内存泄漏、长任务阻塞、脚本错误等问题。

1. 关键性能指标采集

以下是 JavaScript 运行过程中需要重点关注的核心性能指标：

JS 错误数量：捕获语法错误、引用错误、类型错误等，反映代码健壮性。
长任务（Long Tasks）：执行时间超过 50ms 的任务，可能阻塞主线程，影响响应速度。
内存使用情况：包括堆内存占用、内存增长趋势，用于识别内存泄漏。
函数执行耗时：对关键函数进行打点，统计其调用频率与执行时间。
事件监听器数量：过多未清理的监听器可能导致内存泄漏或性能下降。

2. 实现方式与 API 使用

利用浏览器提供的原生接口，可高效采集上述指标。

错误捕获

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

通过全局事件监听收集 JS 运行时异常：

window.addEventListener('error', (event) => {
  reportError({
    message: event.message,
    filename: event.filename,
    lineno: event.lineno,
    colno: event.colno,
    stack: event.error?.stack
  });
});
<p>window.addEventListener('unhandledrejection', (event) => {
reportError({
reason: event.reason?.toString(),
type: 'promise'
});
});</p>

登录后复制

长任务监测

使用 PerformanceObserver 监听长任务：

超能文献

超能文献是一款革命性的AI驱动医学文献搜索引擎。

105

查看详情

if ('PerformanceObserver' in window) {
  const observer = new PerformanceObserver((list) => {
    list.getEntries().forEach((entry) => {
      // duration > 50ms 即为长任务
      if (entry.duration > 50) {
        reportMetric('long-task', {
          duration: entry.duration,
          startTime: entry.startTime,
          attribution: entry.attribution // 可定位来源（Chrome 89+）
        });
      }
    });
  });
  observer.observe({ entryTypes: ['longtask'] });
}

登录后复制

内存信息获取

部分浏览器支持 performance.memory（非标准，主要在 Chrome）：

if (performance.memory) {
  reportMetric('memory', {
    used: performance.memory.usedJSHeapSize,
    total: performance.memory.totalJSHeapSize,
    limit: performance.memory.jsHeapSizeLimit
  });
}

登录后复制

自定义函数埋点

对核心方法进行时间度量：

function measureFn(fn, name) {
  return function(...args) {
    const start = performance.now();
    let result;
    try {
      result = fn.apply(this, args);
    } finally {
      const duration = performance.now() - start;
      if (duration > 100) {
        reportMetric('slow-fn', { name, duration });
      }
    }
    return result;
  };
}
<p>// 使用示例
const heavyCalculation = measureFn(function() {
// 模拟耗时操作
}, 'heavyCalculation');</p>

登录后复制