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 异步监听指标变化，并上报到监控系统，就能实现完整的前端性能监控体系。注意兼容性和采样率，避免过度收集影响性能本身。不复杂但容易忽略。
智谱AI开放平台
智谱AI大模型开放平台-新一代国产自主通用AI开放平台
85 查看详情
以上就是JavaScript中的性能监控（Performance Monitoring）指标有哪些？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/737395.html
微信扫一扫 
支付宝扫一扫 
