JavaScript性能监控依赖Performance API，1. Navigation Timing提供重定向、DNS、TCP、TTFB、DOM交互、DOMContentLoaded及Load等关键时间点；2. Core Web Vitals包括LCP（<2.5s）、FID（<100ms）和CLS（<0.1）三项用户体验指标；3. Resource Timing通过getEntriesByType('resource')分析各资源加载细节；4. 内存与执行性能可借助performance.memory、console.time及User Timing API自定义标记。结合PerformanceObserver异步监听并上报数据，构建完整监控体系，需注意兼容性与采样率。
JavaScript中的性能监控主要依赖浏览器提供的 Performance API，它能帮助开发者获取页面加载、资源请求、脚本执行等关键阶段的时间数据。以下是常见的核心性能指标及其含义和用途：
1. 关键时间点（Navigation Timing）
这些指标来自performance.timing 和 navigationStart，反映页面整体加载过程：
- Redirect Time：重定向耗时，从开始重直到安全连接建立完成的时间。
- DNS Lookup Time：DNS解析时间，域名到IP的转换耗时。
- TCP Connection Time：TCP连接建立时间，包括握手过程。
- Request Time：从发送请求到接收到第一个字节的时间（TTFB，Time To First Byte）。
- Response Time：接收完整响应内容的时间。
- DOM Interactive：DOM解析完成，可以交互的时间点。
- DOMContentLoaded：DOM构建完毕，所有非异步脚本已加载，通常用于衡量“可操作”时间。
- Load Time：页面完全加载（含图片、样式等资源）的时间。
2. 核心 Web 指标（Core Web Vitals）
Google 提出的关键用户体验指标，直接影响搜索引擎排名：- Largest Contentful Paint (LCP)：最大内容渲染时间，衡量页面主要内容加载速度，理想值在2.5秒内。
- First Input Delay (FID)：首次输入延迟，用户第一次与页面交互（如点击按钮）到实际响应的时间，反映响应性，应小于100毫秒。
- Cumulative Layout Shift (CLS)：累计布局偏移，衡量页面加载过程中元素意外移动的程度，影响视觉稳定性，应小于0.1。
web-vitals 库或 PerformanceObserver 获取。
3. 资源加载性能（Resource Timing）
使用performance.getEntriesByType('resource') 可获取每个资源（JS、CSS、图片等）的加载细节：
- 资源的发起时间、DNS、TCP、SSL、TTFB、传输耗时等。
- 识别慢资源，比如某个第三方脚本加载过久。
- 可用于监控懒加载图片或动态导入模块的实际加载表现。
4. 内存与脚本执行（Memory & Script Performance）
部分浏览器支持内存信息采集（仅限Chrome）：-
performance.memory提供 JS 堆内存使用情况（如 total / used size），有助于发现内存泄漏。 - 通过
console.time()和console.timeEnd()手动标记代码段执行时间。 - 使用
User Timing API（performance.mark(),measure()）自定义性能标记，分析关键函数或流程耗时。
基本上就这些。结合 PerformanceObserver 异步监听指标变化，并上报到监控系统，就能实现完整的前端性能监控体系。注意兼容性和采样率，避免过度收集影响性能本身。不复杂但容易忽略。
