怎样使用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() 在业务关键路径中插入自定义标记，测量逻辑段耗时。

移动端UI&微信UI YDUI Touch

YDUI Touch专为移动端打造，在技术实现、交互设计上兼容主流移动设备，保证代码轻、性能高；使用 Flexbox 技术，灵活自如地对齐、收缩、扩展元素，轻松搞定移动页面布局；用 rem 实现强大的屏幕适配布局，等比例适配所有屏幕；自定义Javascript组件、Less文件、Less变量，定制一份属于自己的YDUI。

81

查看详情

立即学习“Java免费学习笔记（深入）”；

• 例如：在 React 组件挂载前打 mark('render-start')，渲染完成后打 mark('render-end')，再用 measure('render-time', 'render-start', 'render-end') 计算
• 所有 mark/measure 数据可通过 performance.getEntriesByType('mark') 或 'measure' 获取
• 适合追踪首屏渲染、接口聚合、动画启动等业务相关性能节点

上报与分析小技巧

测量只是第一步，合理上报才能持续优化。

• 避免高频上报：对非关键指标（如每个 resource）可采样（如 10%）或聚合后上报
• 结合 performance.memory（若支持）观察内存占用，辅助判断内存泄漏
• 注意跨域资源限制：部分字段（如 duration）在跨域脚本/图片上可能为 0，需检查 transferSize 和 encodedBodySize 辅助判断
• 开发阶段可用 performance.toJSON() 快速导出全部数据查看结构

基本上就这些。Performance API 不复杂但容易忽略细节，重点是选对时机、用对类型、结合业务打点——测得准，才改得对。

以上就是怎样使用javascript性能API_如何测量页面性能？的详细内容，更多请关注php中文网其它相关文章！