javascript中的性能监控是什么_如何测量页面加载时间？

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：

标签： javascript java go 浏览器 edge 字节 工具 safari ai 路由 cdn google 开发