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() 做快速验证,就能定位大部分性能问题。











