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() 在业务关键路径中插入自定义标记，测量逻辑段耗时。
立即学习“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_如何测量页面性能？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1544435.html
微信扫一扫 
支付宝扫一扫 
