可通过performance.mark()和performance.measure()在关键节点插入语义化时间标记并计算耗时区间,结合performanceobserver实时监听或getentriesbytype手动采集,上报至监控服务实现精细化性能观测。

可以通过 performance.mark() 和 performance.measure() 在关键业务节点插入自定义时间标记,再结合 performance.getEntriesByType('mark') 或后台上报,实现对业务逻辑执行过程的精细化性能观测。
在关键业务节点调用 performance.mark()
为每个有分析价值的执行阶段起一个语义化名称,例如“用户点击开始”“接口响应完成”“首屏渲染结束”等。这些标记会记录当前高精度时间戳(精确到微秒级),且不受系统时钟调整影响。
- 确保标记名唯一且可读,避免空格或特殊字符,推荐用小写+中划线风格,如
'checkout-start'、'api-fetch-success' - 可在同步代码中直接调用,也可在异步回调、Promise.then、事件监听器中使用
- 示例:
performance.mark('payment-init');
fetch('/api/pay').then(() => performance.mark('payment-api-done'));
用 performance.measure() 计算耗时区间
当需要统计两个标记之间的执行耗时(比如“从点击到接口返回”),用 measure(name, startMark, endMark) 创建测量条目。该操作不触发上报,仅生成一条 measure 类型的 PerformanceEntry。
- startMark 和 endMark 必须已存在,否则 measure 失败(但不报错)
- 可省略 startMark,默认使用同名 mark;也可省略 endMark,默认使用当前时间
- 示例:
performance.mark('ui-render-start');
renderPage();
performance.mark('ui-render-end');
performance.measure('ui-render-duration', 'ui-render-start', 'ui-render-end');
采集并上报自定义打点数据
浏览器不会自动上传 UserTiming 数据,需主动提取并发送至监控服务。建议在页面卸载前(beforeunload)或定时(如每5秒)采集一次,避免遗漏。
- 获取所有标记:
performance.getEntriesByType('mark') - 获取所有测量:
performance.getEntriesByType('measure') - 为减少体积,可只上报业务相关标记(过滤 name 前缀,如
entry.name.startsWith('biz-')) - 上报时带上页面 URL、用户 ID(脱敏)、设备信息等上下文,便于归因分析
配合 PerformanceObserver 实现增量监听(推荐)
相比轮询 getEntriesByType,用 PerformanceObserver 可实时捕获新产生的 mark/measure,更高效、无遗漏。
- 初始化一次即可监听后续所有打点:
const obs = new PerformanceObserver(list => {
list.getEntries().forEach(entry => {
if (entry.entryType === 'mark' || entry.entryType === 'measure') {
sendToMonitor(entry); // 自定义上报函数
}
});
});
obs.observe({entryTypes: ['mark', 'measure']}); - 注意:observer 不会回溯历史标记,只监听 observe 后新增的条目,因此建议尽早初始化(如 script 加载后立即执行)
大量免费API接口:立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游,为数据API应用能力赋能!











