首页 > 文章 > 前端

前端监控获取JS运行时性能数据的方法主要有以下几种：1.使用PerformanceAPIPerformanceAPI是浏览器原生提供的性能监测工具，可以获取详细的JS执行性能数据。示例代码：constperformance=window.performance;//获取页面加载时间constloadTime=performance.timing.loadEventEnd-performance.t

时间：2025-09-29 10:22:32 205浏览收藏

怎么入门文章编程？需要学习哪些知识点？这是新手们刚接触编程时常见的问题；下面golang学习网就来给大家整理分享一些知识点，希望能够给初学者一些帮助。本篇文章就来介绍《前端监控如何获取JS运行时性能数据？》，涉及到，有需要的可以收藏一下

答案：前端监控通过Performance API、错误监听和长任务观察捕获JS运行时性能。使用performance.mark/measure记录执行耗时，window.onerror和unhandledrejection捕获异常，PerformanceObserver监听长任务，结合FPS与内存指标评估运行状态，合理上报以降低性能影响。

前端监控如何捕获JavaScript的运行时性能指标？

前端监控要捕获 JavaScript 的运行时性能指标，核心是利用浏览器提供的 Performance API 和错误/事件监听机制，结合上报策略实现数据采集与分析。重点在于准确获取脚本执行时间、调用栈、内存使用和异常情况。

使用 Performance API 记录执行耗时

Performance API 是浏览器内置的性能测量工具，可用于标记关键函数或模块的执行时间。

• 使用 performance.mark() 在代码关键节点打点，比如函数开始和结束处
• 通过 performance.measure() 计算两个标记之间的耗时
• 示例：

performance.mark('start-process');
// 执行某段逻辑
someHeavyFunction();
performance.mark('end-process');
performance.measure('process-duration', 'start-process', 'end-process');

• 调用 performance.getEntriesByType("measure") 获取所有测量结果并上报

监听全局错误与未处理的 Promise 拒绝

JavaScript 运行时错误会直接影响用户体验，需通过事件监听捕获堆栈信息。

• 监听 window.onerror 捕获同步错误和资源加载错误
• 监听 window.addEventListener('unhandledrejection') 捕获未处理的 Promise 异常
• 错误回调中收集 message、stack、filename、lineNumber 等字段用于定位问题
• 注意：跨域脚本错误可能只显示 "Script error."，需设置 CORS 头部或内联 source-map 支持

统计长任务（Long Tasks）影响主线程的情况

长时间占用主线程的任务会导致页面卡顿，可通过 PerformanceObserver 监听长任务。

• 创建 observer 观察 "longtask" 类型条目
• 当任务持续超过 50ms 时触发，可关联其所属的 iframe 或 taskAt 阶段
• 示例代码：

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log(`长任务耗时: ${entry.duration}ms`, entry);
    // 上报至监控系统
  });
});
observer.observe({ entryTypes: ['long-task'] });

• 结合 User Timing API 可定位具体哪段 JS 导致阻塞

采集内存与 FPS 等辅助指标

虽然不是所有环境都支持，但部分指标有助于判断运行时健康状况。

• 在 Chrome 中可通过 performance.memory 获取 JS 堆内存使用情况（仅开发工具可用）
• 使用 requestAnimationFrame 统计帧率变化，识别卡顿周期
• 示例帧率计算：

let lastTime = performance.now();
let frameCount = 0;
function tick() {
  frameCount++;
  const now = performance.now();
  if (now - lastTime >= 1000) {
    console.log(`当前 FPS: ${frameCount}`);
    frameCount = 0;
    lastTime = now;
  }
  requestAnimationFrame(tick);
}

基本上就这些方法。通过组合使用 Performance API、错误监听和长任务观察，可以全面掌握 JavaScript 的运行状态。关键是设计合理的采样频率和上报机制，避免对用户造成额外性能负担。

今天关于《前端监控获取JS运行时性能数据的方法主要有以下几种：1.使用PerformanceAPIPerformanceAPI是浏览器原生提供的性能监测工具，可以获取详细的JS执行性能数据。示例代码：constperformance=window.performance;//获取页面加载时间constloadTime=performance.timing.loadEventEnd-performance.timing.navigationStart;//获取JS执行时间constscriptTime=performance.now()-startTime;//startTime是脚本开始执行的时间常用属性：performance.now()：返回当前页面的高精度时间戳（毫秒级）。performance.timing：包含页面加载过程中的各个阶段时间。performance.memory（部分浏览器支持）：返回内存使用情况。2.使用console.time()和console.timeEnd()适用于简单的性能测试，适合调试阶段使用。示例：console.time('myFunction');myFunction();console.timeEnd('myFunction');//输出myFunction的执行时间3.使用第三方性能监控库如Sentry、NewRelic、Lighthouse等，它们提供了更全面的性能分析功能。特点：自动收集JS执行时间、加载时间》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！