JavaScript性能监控通过内置API或第三方工具收集分析各阶段数据以优化体验；核心是Navigation Timing API、Performance.now()、Web Vitals指标（FCP/LCP/CLS/TTFB）、PerformanceObserver监听、手动埋点及兼容性处理。
JavaScript 中的性能监控，是指通过内置 API 或第三方工具，收集、分析网页在加载、渲染、交互等各阶段的性能数据，从而识别瓶颈、优化用户体验。测量页面加载时间是其中最基础也最关键的环节。
使用 Navigation Timing API 获取精确加载时间
这是浏览器原生提供的标准接口，能获取从导航开始到页面完全加载的完整时间线，精度高且无需额外依赖。
-
Performance.now() 返回高精度时间戳（毫秒级，带小数），适合计算任意两段代码间的耗时
-
performance.getEntriesByType('navigation') 可获取当前页面的导航记录，包含
loadEventEnd、domContentLoadedEventEnd 等关键时间节点
- 例如：获取白屏时间（TTFB + 首字节后到首帧渲染）可结合
navigationStart 和 first-paint（需用 getEntriesByType('paint')）
关注核心指标：FCP、LCP、CLS、TTFB
这些是 Google 提出的 Web Vitals 核心指标，直接反映用户感知体验，现代监控应优先覆盖：
-
FCP（First Contentful Paint）：页面首次渲染文本、图片、非空白 canvas 等内容的时间
-
LCP（Largest Contentful Paint）：最大内容元素渲染完成的时间，通常代表“主要内容可见”
-
CLS（Cumulative Layout Shift）：衡量页面加载过程中意外布局偏移的程度，值越低越稳定
-
TTFB（Time to First Byte）：请求发出到收到第一个字节的时间，反映服务器响应速度
可通过 PerformanceObserver 监听这些指标，例如监听 LCP：
const observer = new PerformanceObserver((list) => {
for (const entry of list.get
Entries()) {
if (entry.name === 'largest-contentful-paint') {
console.log('LCP 时间：', entry.startTime);
}
}
});
observer.observe({entryTypes: ['largest-contentful-paint']});
手动埋点与上报策略
自动采集之外，关键业务节点（如搜索按钮点击后结果渲染完成、列表滚动到底部触发加载）建议手动打点，更贴合真实场景。
- 用
performance.mark() 打标记，performance.measure() 计算区间耗时
- 避免阻塞主线程，上报推荐使用
navigator.sendBeacon()，确保页面卸载前也能发出数据
- 采样上报：高流量站点可按比例（如 1%）上报，平衡数据价值与服务器压力
注意兼容性与实际环境差异
本地开发环境测得的时间往往比线上快很多，因为缺少网络延迟、CDN 跳转、真实设备性能限制等因素。
- Chrome DevTools 的 Network 面板可模拟 3G、CPU 降频等条件，辅助复现弱网/低端机场景
- Safari 和旧版 Edge 对部分 Performance API 支持不全，需做特性检测（如
if ('getEntriesByType' in performance)）
- 单页应用（SPA）需额外监控路由切换后的渲染耗时，不能只依赖初始 load 事件
Entries()) {