怎么在HTML中通过performance.mark自定义标记测量业务流程耗时-html教程-PHP中文网

不能，必须配合performance.measure；单独调用performance.mark('login_start')仅记录时间戳，不生成耗时数据，需显式调用performance.measure('xxx_duration', 'xxx_start', 'xxx_end')才能获得毫秒级差值。

怎么在html中通过performance.mark自定义标记测量业务流程耗时

performance.mark 能直接测业务耗时吗？不能，必须配 performance.measure

单独调用 performance.mark('login_start') 只是打个时间戳，不产生耗时数据。真正拿到毫秒级差值，得靠 performance.measure() 显式计算两个 mark 之间的间隔。浏览器不会自动关联 start / end 标记——你得自己命名、自己配对、自己触发 measure。

常见错误是只打 mark 不 measure，结果在 DevTools 的 Performance 面板里看到一堆标记点，但 Network 或 Timings 标签页里查不到对应耗时条目。

必须成对使用：performance.mark('xxx_start') 和 performance.mark('xxx_end')
performance.measure('xxx_duration', 'xxx_start', 'xxx_end') 才生成可读的测量记录
mark 名称区分大小写，且不能含空格或特殊字符（推荐用下划线或驼峰）

如何把 mark + measure 结果上报到监控系统？别依赖 console.time

console.time() 是调试用的，不可靠也不可采集；真要进监控，得从 performance.getEntriesByType('measure') 拿原始数据。每次调用 measure() 后，浏览器会往性能条目队列里塞一条 { name, startTime, duration, entryType: 'measure' } 对象。

注意：这些条目默认不会自动清空，重复触发同一业务流程会导致历史数据堆积。上报前建议用 performance.clearMarks() 和 performance.clearMeasures() 清理，或限定取最近 N 条：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

const measures = performance.getEntriesByType('measure')
  .filter(e => e.name.startsWith('api_login_'))
  .slice(-1); // 只取最后一次
if (measures.length) {
  sendToMonitor({
    metric: 'login_duration',
    value: measures[0].duration,
    timestamp: measures[0].startTime
  });
}

SPA 路由跳转中打 mark 容易漏掉哪些时机？

在 React/Vue 等框架里，不能只在组件 mounted 或 useEffect 里打 end mark——那测的是渲染完成时间，不是用户可交互时间。真实业务耗时应覆盖「用户点击 → 请求发出 → 数据返回 → 视图更新 → 按钮可点」全链路。

start mark 放在用户操作触发瞬间（如按钮 onClick 回调开头）
end mark 必须等关键 DOM 元素就绪，比如用 requestIdleCallback 或监听按钮 disabled 属性移除
避免在异步回调里直接打 mark：若请求被 Promise.all 包裹或有竞态，可能误测超时逻辑
Vue 3 的 nextTick 后打 mark 更准；React 可结合 useLayoutEffect 确保 DOM 已更新

为什么 DevTools 里看不到自定义 measure？检查这三点

即使代码执行无报错，measure 条目也可能不显示在 Performance 面板的“Timings”轨道下。最常卡在这三个地方：

没手动开启记录：按 Ctrl+Shift+P（Win）或 Cmd+Shift+P（Mac），输入 “Start profiling and reload page”，不能只点录制按钮
mark 名称拼写不一致：比如 start 打了 'pay_submit'，measure 却传 'pay_submit_end' 当 end 参数——浏览器找不到匹配项，measure 会静默失败
调用顺序错乱：先 measure 再 mark，或 end mark 在 start mark 前触发（比如异步时序颠倒），此时 duration 会是 NaN，条目被过滤掉

验证是否生效，最简单方法是在控制台运行 performance.getEntriesByType('measure')，看返回数组长度和内容。为空，说明 mark/measurement 配对失败或未触发。