performance api 是浏览器原生高性能测量工具,支持 performance.now() 高精度计时、mark/measure 打点分析、navigation 数据追踪首屏关键路径、resource/paint 分类监控及 performanceobserver 实时监听。

Performance API 是浏览器原生提供的性能测量工具,它不依赖第三方库,精度高、覆盖广,能直接反映真实用户体验。核心在于用对方法——不是所有时间测量都适合用 Date.now(),也不是所有指标都要手动算。
用 performance.now() 测代码执行耗时
这是最常用也最容易上手的方式。它返回的是从页面开始加载起的高精度时间(单位毫秒,实际精度可达微秒级),不受系统时钟跳变、NTP同步或时区调整影响,比 Date.now() 更可靠。
- 适合测量函数、循环、DOM 操作、数据处理等任意同步或异步逻辑块的实际运行时间
- 调用简单:先记起点,再记终点,相减即得耗时
- 示例:
const start = performance.now();
doSomethingExpensive();
const end = performance.now();
console.log(`执行耗时:${end - start} ms`);
用 mark 和 measure 打点分析业务流程
当逻辑链较长(比如“点击→发请求→渲染组件→上报埋点”),单纯用 now() 容易出错或难以复用。这时用 performance.mark() 打标记、performance.measure() 计算区间,更清晰可控。
Java Linux版下载入口,提供 Oracle JDK 26.0.2 官方 Linux 安装包、Java 环境配置、JDBC 数据库连接和 Java 服务端开发相关信息。
- mark('xxx') 可在任意位置打时间点,包括 Promise 回调、setTimeout、事件监听器内
- measure('name', 'start', 'end') 自动计算两个标记之间的时间差
- 结果统一存入 PerformanceEntry,可用 performance.getEntriesByType('measure') 获取全部记录
- 建议命名语义化,例如
'cart-open-start'、'cart-render-complete'
查 navigation 数据看首屏关键路径
页面加载不是黑盒。performance.getEntriesByType('navigation') 返回一个数组(通常只有一项),里面是完整的导航时序对象,包含 DNS、TCP、SSL、请求、响应、DOM 解析、DOMContentLoaded、load 等各阶段时间戳。
-
白屏时间 ≈
entry.fetchStart - entry.navigationStart -
首屏可交互时间 ≈
entry.domContentLoadedEventEnd - entry.fetchStart -
后端响应耗时(TTFB) =
entry.responseStart - entry.requestStart -
load 事件本身耗时 =
entry.loadEventEnd - entry.loadEventStart(常被忽略但很有价值)
监控资源与渲染行为
除了主文档,图片、脚本、字体等资源的加载效率直接影响体验。用 performance.getEntriesByType() 可分类提取:
-
performance.getEntriesByType('resource')→ 查每个资源的duration、transferSize、initiatorType -
performance.getEntriesByType('paint')→ 获取first-paint和first-contentful-paint时间点 -
new PerformanceObserver+observe({ entryTypes: [...] })→ 实时监听新条目(如 LCP、长任务)
大量免费API接口:立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游,为数据API应用能力赋能!










