通过performance.mark()和measure()精准标记用户可感知的业务节点，配合PerformanceObserver自动上报，实现微秒级端到端耗时监控。
直接在关键操作的起始和结束位置调用 performance.mark()，再用 performance.measure() 关联两点，就能获得微秒级精度的业务耗时数据。重点不在“打多少点”，而在于点是否真正对应用户可感知的业务意义。
选对关键节点：从用户视角定义“开始”和“结束”
标记不是技术动作堆砌，而是对业务流程的精准切片。例如：
- “搜索框输入完成”不是监听
input事件，而是等防抖结束、请求已发出的那一刻打mark('search-request-sent') - “支付弹窗出现”不是 DOM 插入就标记，而是等动画过渡完成、按钮可点击时打
mark('payment-dialog-ready') - “表格渲染完成”不是
setState后立即标记，而是监听requestIdleCallback或使用setTimeout(..., 0)确保 React/Vue 已完成 DOM 更新后再打点
规范命名与上下文绑定
标记名需具备唯一性、可读性和可追溯性。避免泛化名称如 'start' 或 'end'，推荐格式：模块名-动作-状态（如 'product-list-fetch-start'、'product-list-render-complete'）。同时建议在打点时附带轻量上下文：
- 用
performance.mark()的detail字段（Chrome 支持）传入当前页签 ID、用户角色或 A/B 实验分组 - 或在后续
measure时，将这些信息作为自定义属性一并上报，便于多维下钻分析
配合 measure 实现端到端耗时计算
performance.measure() 是提取耗时的核心环节，必须确保起点和终点都已存在：
- 若某标记未被记录（比如异步逻辑未执行完页面就跳转），
measure会静默失败，建议加一层存在性校验 - 一个常见做法是：在关键流程入口统一打
start点，在出口处先检查start是否存在，再打end并立即measure - 示例：performance.mark('checkout-submit-start'); …… fetch().then(() => { if (performance.getEntriesByName('checkout-submit-start').length) { performance.mark('checkout-submit-success'); performance.measure('checkout-submit-duration', 'checkout-submit-start', 'checkout-submit-success'); } });
与 PerformanceObserver 协同，避免手动轮询
不要用 setInterval 定期查 getEntriesByType('measure')。应使用 PerformanceObserver 监听 measure 类型事件，实现自动捕获：
- 注册一次 observer，所有后续
measure都会被实时推送 - 可在回调中过滤出业务相关指标（如
name.startsWith('checkout-')），并添加设备型号、网络类型等环境字段后上报 - 注意关闭 observer 的时机（如单页应用路由离开前），防止内存泄漏
