答案：前端监控通过Performance API、错误监听和长任务观察捕获JS运行时性能。使用performance.mark/measure记录执行耗时，window.onerror和unhandledrejection捕获异常，PerformanceObserver监听长任务，结合FPS与内存指标评估运行状态，合理上报以降低性能影响。
前端监控要捕获 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 监听长任务。
立即学习“Java免费学习笔记（深入）”；
• 创建 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 的运行状态。关键是设计合理的采样频率和上报机制，避免对用户造成额外性能负担。
