JavaScript性能监控主要依靠Performance API，通过performance.getEntriesByType('navigation')、PerformanceObserver监听paint/longtask/layout-shift等事件、performance.mark()/measure()打点测速、performance.memory评估内存（Chrome专属）及主动上报数据实现全面监控。
JavaScript性能监控主要依靠浏览器提供的Performance API，它能精确测量页面加载、脚本执行、渲染、资源加载等各阶段耗时，帮助定位性能瓶颈。
利用performance.timing分析页面加载关键节点
该属性提供导航和资源加载的详细时间戳（如navigationStart、domContentLoadedEventEnd、loadEventEnd），可用于计算白屏时间、首屏时间、DOM就绪时间等核心指标。注意：在现代页面中，performance.timing已被performance.navigation和performance.getEntries()逐步替代，但仍兼容大多数场景。
- 推荐用
performance.getEntriesByType('navigation')[0]替代performance.timing获取更准确的导航数据 - 计算首屏时间建议结合
PerformanceObserver监听paint类型事件，捕获first-contentful-paint
使用performance.mark()和performance.measure()打点测速
可在代码关键路径插入自定义标记（mark），再通过measure计算两点间耗时，适合监控函数执行、模块加载、接口响应等业务逻辑性能。
-
performance.mark('api-start')→ 发起请求前打点 -
performance.mark('api-end')→ 接口返回后打点 -
performance.measure('api-duration', 'api-start', 'api-end')→ 生成可统计的测量记录 - 配合
performance.getEntriesByName('api-duration')提取结果，便于上报或调试
监听PerformanceObserver捕获实时性能事件
这是现代性能监控的核心方式，支持监听paint、largest-contentful-paint、layout-shift、longtask等关键指标，尤其适合监控用户体验相关数据（如CLS、LCP、INP）。
立即学习“Java免费学习笔记（深入）”；
- 监听FCP：
new PerformanceObserver(cb).observe({entryTypes: ['paint']})，过滤name === 'first-contentful-paint' - 捕获长任务（>50ms）影响主线程：
entryTypes: ['longtask']，识别JS阻塞问题 - 监控布局偏移：
entryTypes: ['layout-shift']，辅助优化CLS
借助performance.memory（仅Chrome）评估内存压力
该属性提供JavaScript堆内存使用情况（usedJSHeapSize、totalJSHeapSize），有助于发现内存泄漏或过度对象创建问题。注意：非标准API，仅部分浏览器支持，生产环境需做兼容判断。
- 定期采样
performance.memory?.usedJSHeapSize，对比历史趋势 - 结合
performance.getEntriesByType('resource')分析大体积JS/CSS是否未及时释放 - 避免在循环中持续创建闭包或未清理的事件监听器
不复杂但容易忽略：所有Performance API采集的数据都需主动上报（如通过sendBeacon）才能用于后续分析，且应控制采样率避免影响用户体验。
