JavaScript中的性能监控（Performance Monitoring）指标有哪些？

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）

• 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）

• Largest Contentful Paint (LCP)：最大内容渲染时间，衡量页面主要内容加载速度，理想值在2.5秒内。
• First Input Delay (FID)：首次输入延迟，用户第一次与页面交互（如点击按钮）到实际响应的时间，反映响应性，应小于100毫秒。
• Cumulative Layout Shift (CLS)：累计布局偏移，衡量页面加载过程中元素意外移动的程度，影响视觉稳定性，应小于0.1。

3. 资源加载性能（Resource Timing）

• 资源的发起时间、DNS、TCP、SSL、TTFB、传输耗时等。
• 识别慢资源，比如某个第三方脚本加载过久。
• 可用于监控懒加载图片或动态导入模块的实际加载表现。

4. 内存与脚本执行（Memory & Script Performance）

• performance.memory 提供 JS 堆内存使用情况（如 total / used size），有助于发现内存泄漏。
• 通过 console.time() 和 console.timeEnd() 手动标记代码段执行时间。
• 使用 User Timing API（performance.mark(), measure()）自定义性能标记，分析关键函数或流程耗时。

基本上就这些。结合 PerformanceObserver 异步监听指标变化，并上报到监控系统，就能实现完整的前端性能监控体系。注意兼容性和采样率，避免过度收集影响性能本身。不复杂但容易忽略。

慧中标AI标书

慧中标AI标书是一款AI智能辅助写标书工具。

120

查看详情

以上就是JavaScript中的性能监控（Performance Monitoring）指标有哪些？的详细内容，更多请关注php中文网其它相关文章！