怎样使用javascript性能API_如何测量页面性能？

JavaScript Performance API 通过 Navigation Timing、PerformanceObserver 和 User Timing 三类接口实现轻量可靠的页面性能测量：前者获取导航生命周期数据，中者动态监听 paint/resource/longtask 事件，后者支持自定义打点与测量。

用 JavaScript 的 Performance API 测量页面性能，核心是利用浏览器原生提供的高精度时间戳和标准化指标，不依赖第三方库，轻量且可靠。

获取关键性能时间点（Navigation Timing）

通过 performance.getEntriesByType('navigation') 获取页面导航的完整生命周期数据，比如 DNS 查询、TCP 连接、SSL 协商、请求响应、DOM 解析、资源加载等耗时。

• 首次调用前确保页面已加载完成（如在 load 事件后），否则可能返回空数组
• 典型字段包括：connectStart、responseEnd、domContentLoadedEventEnd、loadEventEnd
• 示例：计算白屏时间（FCP 前可用的近似值）可取 responseEnd - fetchStart；首屏渲染时间建议优先用 PerformanceObserver 监听 paint 类型

监听绘制与资源加载（PerformanceObserver）

用 PerformanceObserver 动态监听关键性能事件，比轮询更高效、更及时。

• 监听 'paint' 获取 FP（First Paint） 和 FCP（First Contentful Paint）
• 监听 'resource' 查看各静态资源（JS/CSS/图片）的加载耗时与瓶颈
• 监听 'longtask' 发现阻塞主线程超过 50ms 的任务（需开启 entryTypes: ['longtask']）
• 注意：observer 需在页面早期创建（如 中 script 标签内），避免错过初始 paint 事件

手动打点与自定义指标（User Timing）

用 performance.mark() 和 performance.measure() 在业务关键路径中插入自定义标记，测量逻辑段耗时。

标签： css react javascript java js json 浏览器 ssl ai dns 跨域 内存占用