通过Performance API和埋点机制采集JS加载、执行耗时、内存、长任务及错误，结合navigator.sendBeacon上报，实现前端性能监控闭环。
前端性能监控中，JavaScript的运行状态直接影响用户体验。要实现有效的性能监控，必须采集关键指标并分析潜在瓶颈。核心思路是利用浏览器提供的API结合自定义埋点机制，获取JS执行过程中的错误、耗时和资源消耗情况。
关键性能指标采集
以下指标对评估JavaScript性能至关重要：
- 首屏JS加载时间：通过performance.getEntriesByType("resource")筛选脚本资源，获取各JS文件的加载耗时。
- 执行耗时：使用performance.mark()在关键函数前后打点，计算执行间隔。
- 内存使用：部分现代浏览器支持performance.memory，可获取JS堆内存占用。
- 长任务（Long Tasks）：监听PerformanceObserver捕获阻塞主线程超过50ms的任务。
- 错误与异常：通过window.onerror和window.addEventListener('unhandledrejection')收集运行时错误。
使用Performance API进行监控
浏览器原生Performance API是采集性能数据的基础工具：
- 调用performance.now()获取高精度时间戳，用于计算函数执行时间。
- 通过performance.measure()记录两个mark之间的耗时，并存入测量表。
- 使用PerformanceObserver监听measure或longtask条目，异步上报数据。
错误与异常监控
JavaScript运行时错误会直接影响功能可用性：
立即学习“Java免费学习笔记（深入）”；
- 同步错误可通过window.onerror捕获，包含错误信息、文件名和行号。
- 异步错误如Promise拒绝，需监听unhandledrejection事件。
- 建议对第三方库包裹try-catch，防止其异常中断主流程。
- 错误信息应包含上下文（如用户操作路径），便于复现问题。
数据上报与分析
采集到的数据需及时上报后端进行聚合分析：
- 使用navigator.sendBeacon()在页面卸载前发送数据，确保不丢失。
- 对大量日志采用采样上报，避免影响正常请求。
- 后端按页面、设备、地区等维度统计JS错误率、加载分布和长任务频率。
- 设置阈值告警，如某版本JS错误率突增10%，触发通知。
基本上就这些。建立持续的JS性能监控体系，能快速发现线上问题，优化执行效率，提升整体响应速度。
