Performance API 是浏览器原生高性能监控工具，支持微秒级精度测量代码执行、页面生命周期、资源加载、渲染指标及长任务，无需第三方库。
Performance API 是浏览器提供的一套原生接口，用来精确获取页面运行时的性能数据，比如加载时间、渲染帧率、资源加载耗时、内存使用、长任务等。它不依赖第三方库，精度高（微秒级），是前端性能监控和优化的核心工具。
常用 Performance 方法和场景
最常用的是 performance.now() 和 performance.mark() 配合 performance.measure()，适合测量任意代码段执行耗时：
performance.now() 返回当前时刻的高精度时间戳（单位：毫秒，精度可达微秒），比 Date.now() 更准，且不受系统时间调整影响 performance.mark('start') 打标记，performance.mark('end') 再打一个，然后用 performance.measure('myTask', 'start', 'end') 计算两者间隔 测量结果可通过 performance.getEntriesByName('myTask') 获取，返回包含 duration 的对象
获取页面整体生命周期关键时间点
performance.timing（已废弃但仍有兼容）和更现代的 performance.getEntriesByType('navigation') 可拿到导航相关的完整时间线：
例如 navigationStart（导航开始）、domContentLoadedEventEnd（DOM 加载完成）、loadEventEnd（页面完全加载）等 推荐用 performance.getEntriesByType('navigation')[0] 读取，字段名一致但语义更清晰，且支持多页导航记录 注意：这些时间基于 performance.timeOrigin，不是绝对时间，而是相对页面创建时刻的偏移量
监控资源加载与渲染表现
用 performance.getEntriesByType('resource') 查看每个脚本、样式、图片等的加载耗时；用 performance.getEntriesByType('paint') 获取首次绘制（first-paint）和首次内容绘制（first-contentful-paint）时间：
立即学习“Java免费学习笔记（深入）”；
资源条目含 startTime、duration、fetchStart、responseEnd 等，可分析 DNS、TCP、SSL、请求响应各阶段瓶颈 paint 类型需 Chrome 60+ 或新版 Edge/Firefox 支持，是核心 Web 指标（CWV）之一 配合 performance.setResourceTimingBufferSize(500) 可扩大缓存容量，避免早期资源记录被丢弃
捕获长任务与内存信息（进阶）
通过 PerformanceObserver 监听 longtask 类型，能发现阻塞主线程超 50ms 的任务（影响交互响应）；部分浏览器还支持 memory 字段（需开启 flag 或特定环境）：
new PerformanceObserver(cb).observe({entryTypes: ['longtask']}) 可实时上报卡顿源头 performance.memory（非标准，仅 Chromium）提供 usedJSHeapSize 等，辅助判断内存泄漏 注意：longtask 不是每毫秒上报，而是聚合后触发，适合监控而非精确计时
基本上就这些。用好 Performance API 不需要复杂封装，关键是选对时机（比如在 DOM 就绪后测渲染，加载完成后查资源），再结合 console.time() 做快速验证，就能定位大部分性能问题。
以上就是javascript的performance api是什么_如何测量性能？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1542392.html
微信扫一扫 
支付宝扫一扫 
