前端性能监控需采集FP、FMP、LCP、FID、CLS等核心指标，结合JavaScript错误捕获与自定义行为标记，通过Performance API和事件监听实现；利用sendBeacon懒加载上报，采样非关键数据，持续优化采集与上报策略以提升用户体验。
前端性能监控是提升用户体验的关键环节，而JavaScript指标采集则是其中的核心部分。通过准确采集关键指标，开发者能快速定位页面加载慢、交互卡顿等问题。以下是实际落地中重点关注的内容和方法。
核心性能指标采集
现代浏览器提供了 Performance API，可直接获取关键性能数据。重点关注以下指标：
- FP（First Paint）：首次渲染像素的时间，反映页面是否有响应。
- FMP（First Meaningful Paint）：页面主要内容绘制完成的时间。
- LCP（Largest Contentful Paint）：最大内容元素渲染时间，衡量感知加载速度。
- FID（First Input Delay）：用户首次交互时的响应延迟。
- CLS（Cumulative Layout Shift）：页面布局偏移量，影响视觉稳定性。
使用 performance.getEntriesByType('navigation') 或 PerformanceObserver 可监听这些指标。
JavaScript错误与运行时监控
前端异常会影响功能完整性，需主动捕获并上报：
立即学习“Java免费学习笔记（深入）”；
- 通过 window.onerror 捕获全局JS错误。
- 监听 unhandledrejection 事件获取未处理的Promise异常。
- 记录错误堆栈、发生URL、用户设备信息，便于复现问题。
- 结合 sourcemap 解析压缩后的代码位置。
自定义行为与交互指标
除了标准指标，业务层面的行为数据也重要：
- 记录按钮点击、表单提交等关键操作的响应时间。
- 监控异步请求耗时，识别接口瓶颈。
- 使用 performance.mark() 和 measure() 标记关键执行段。
- 例如：标记“搜索开始”和“结果返回”，计算搜索耗时。
数据上报与采样策略
全量上报可能影响性能或造成服务压力，合理设计上报机制：
- 采用懒加载上报，利用 navigator.sendBeacon 在页面卸载时发送数据。
- 对非关键指标进行采样，如按10%比例上报普通用户数据。
- 优先上报错误和超时事件，保证问题及时发现。
- 避免频繁打点，合并多个指标一次性发送。
基本上就这些。性能监控不是一次配置就结束的事，需要持续优化采集精度和上报效率，真正发挥数据价值。
