答案：监控JavaScript应用需采集FCP、LCP、FID、CLS、TTFB等核心指标，利用PerformanceObserver和事件监听实现低开销数据采集，结合sendBeacon上报与采样策略，聚合分析页面性能及异常，建立可持续优化的反馈闭环。
监控JavaScript应用的性能和用户体验，核心在于采集关键指标并分析其变化趋势。重点不是堆砌工具，而是建立可量化、可预警、可持续优化的数据体系。以下是一套实用的指标采集方案。
核心用户体验指标定义
真实用户感知的质量，比实验室数据更有价值。重点关注以下几类可测量的指标：
- FCP（First Contentful Paint）：页面首次渲染内容的时间，反映用户“看到东西”的速度
- LCP（Largest Contentful Paint）：最大内容块渲染完成时间，衡量主体内容加载体验
- FID（First Input Delay）：用户首次交互到响应之间的延迟，体现页面响应性
- CLS（Cumulative Layout Shift）：页面布局偏移总和，评估视觉稳定性
- TTFB（Time to First Byte）：网络请求起始到收到首字节的时间，反映后端性能
前端采集实现方式
使用浏览器原生API进行低开销采集，避免影响性能本身。
通过 PerformanceObserver 监听关键指标：
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
if (entry.name === 'first-contentful-paint') {
reportMetric('fcp', entry.startTime);
}
if (entry.entryType === 'largest-contentful-paint') {
reportMetric('lcp', entry.startTime);
}
if (entry.entryType === 'layout-shift' && !entry.hadRecentInput) {
reportMetric('cls', entry.value);
}
}
});
<p>observer.observe({ entryTypes: ['paint', 'largest-contentful-paint', 'layout-shift'] });
FID 需通过事件监听捕获：
立即学习“Java免费学习笔记（深入）”；
let firstInputDelay = null;
const handleFirstInput = (event) => {
if (!firstInputDelay) {
firstInputDelay = event.timeStamp - event.startTime;
reportMetric('fid', firstInputDelay);
}
};
['click', 'keydown', 'touchstart'].forEach(eventType => {
window.addEventListener(eventType, handleFirstInput, { once: true, passive: true });
});
数据上报与聚合策略
采集后需合理上报，避免请求风暴或丢失关键样本。
- 使用 sendBeacon 确保页面卸载时数据仍能发出
- 对非关键指标做采样上报（如 10% 用户），控制服务器压力
- 按路由或页面分组聚合，便于定位问题页面
- 结合用户设备信息（机型、网络类型）做分层分析
异常与长期趋势监控
除了基础指标，还需关注 JavaScript 执行异常和资源加载问题。
- 监听 window.onerror 和 unhandledrejection 捕获运行错误
- 通过 performance.getEntriesByType('resource') 分析 JS/CSS/图片加载耗时
- 设置阈值告警，例如 LCP > 2.5s 触发通知
- 定期生成周报，对比版本迭代前后的指标变化
基本上就这些。关键是把指标变成日常开发的反馈闭环，而不是一次性埋点任务。
