前端监控需采集JS错误、长任务、内存使用等关键指标，通过error事件、PerformanceObserver、performance.memory等API实现，并结合sendBeacon与采样策略上报，兼顾性能与数据完整性。
前端监控中，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
});
});
window.addEventListener('unhandledrejection', (event) => {
reportError({
reason: event.reason?.toString(),
type: 'promise'
});
});
长任务监测
使用 PerformanceObserver 监听长任务：
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;
};
}
// 使用示例
const heavyCalculation = measureFn(function() {
// 模拟耗时操作
}, 'heavyCalculation');
3. 上报策略与性能权衡
采集数据需合理上报，避免影响主业务流程。
- 使用
navigator.sendBeacon确保页面卸载前数据不丢失。 - 对非紧急日志采用批量延迟上报，减少请求频次。
- 设置采样率（如 10% 用户），防止服务端压力过大。
- 敏感信息脱敏处理，遵守隐私合规要求。
基本上就这些。精准采集 JS 性能指标，结合真实用户场景分析，才能真正推动前端质量提升。不复杂但容易忽略的是细节处理，比如跨域脚本错误的堆栈模糊问题、长任务归因不全等，都需要针对性应对。
