user timing api 通过结构化标记与measure精确测量各环节耗时:按流程分层命名、避免动态拼接、用measure替代手动计算,并支持跨线程时间对齐与devtools可视化分析。

用 User Timing API 精确记录复杂逻辑每一步耗时,关键不是堆砌标记,而是让标记有结构、可定位、能回溯。它不替代 Performance 面板的宏观视图,但能把“哪一段卡了”从猜测变成证据。
按执行流程分层打点,避免标记泛滥
不要只在函数开头结尾各 mark 一次。对多步骤逻辑(比如“解析 → 校验 → 转换 → 合并”),每个环节边界都应有明确标记:
-
入口统一命名前缀:如
process-step1-parse、process-step2-validate,便于后续用正则或脚本批量筛选 -
嵌套操作加子级标识:若校验含多个字段,可用
validate-field-a、validate-field-b,避免所有校验混成一个长区间 -
避免动态拼接名:不用
performance.mark('step-' + i),名称需静态可检索;运行时差异用 measure 的 start/end 组合体现
用 measure 替代手动减法,保证精度与可读性
别再写 const t1 = performance.now(); doWork(); const t2 = performance.now(); console.log(t2 - t1)。直接用 measure:
- 先打两个 mark:
performance.mark('start-transform')和performance.mark('end-transform') - 再调用:
performance.measure('transform-duration', 'start-transform', 'end-transform') - 结果自动出现在
performance.getEntriesByType('measure')中,单位毫秒,精度达微秒级,且不受系统时间调整影响
结合 Worker 场景,跨线程对齐时间轴
主线程和 Worker 各自调用 performance.mark(),时间戳默认独立计时,但可通过共享起始锚点对齐:
- 主线程发消息前记:
performance.mark('worker-start') - Worker 收到后立刻记:
self.performance.mark('worker-received') - 主线程收到响应后再记:
performance.mark('worker-end') - 三者虽属不同上下文,但用
getEntriesByName()分别提取,再比对数值差,就能算出通信延迟与纯计算耗时
录制后快速验证与导出分析
标记不会自动显示在 DevTools Performance 面板——需手动启用:
- 录制时勾选 User Timing 轨道(位于底部“More tracing categories”中)
- 录制完成后,在时间轴底部找到绿色 User Timing 轨道,所有
mark和measure会以带名称的横条形式直观呈现 - 右键导出 JSON,用脚本过滤出所有
entryType: 'measure'的数据,按 duration 排序,一眼锁定最慢环节
大量免费API接口:立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游,为数据API应用能力赋能!











