应使用performance.mark与performance.measure结合用户点击和首屏图像onload事件精准测量“点击到首屏图加载完成”耗时，起点为点击瞬间，终点为关键img加载完成，通过sendBeacon上报；需处理跨页mark丢失、错误加载、重复打点及iOS兼容性问题。
要精准测量“用户点击（如从列表页跳转）到首屏图像完全加载”这段用户可感知的耗时，不能依赖默认导航时机或 DOMContentLoaded，而需结合用户行为触发 + 图像加载完成信号 + performance.measure 定制打点。核心是把“用户意图”和“视觉就绪”对齐，而非技术阶段。
明确测量目标与关键节点
这个耗时本质是“用户发起操作 → 看到首屏关键图像渲染完成”的闭环。它包含三段真实延迟：
- 导航与资源请求延迟：从点击（如 history.push 或 a 标签跳转）开始，到 HTML 开始下载（fetchStart）
-
首屏图像加载延迟：首屏中起主导作用的
（比如 banner、主图）的 load 事件触发时刻
- 排除干扰项：不依赖 window.onload（可能等非首屏资源），也不用 FCP/LCP（它们反映绘制时间，不保证图片已解码显示）
在关键位置插入 performance.mark
必须在两个确定、可控的时间点手动打标：
-
起点：用户点击瞬间
在跳转逻辑中（如 React 的 onClick、Vue 的 @click、或原生 a 标签拦截）立即执行：
performance.mark('user-click-to-detail'); -
终点：首屏图像加载完成
给首屏关键
添加 onload 监听，并在回调中打标：
<img src="banner.jpg" onload="performance.mark('detail-hero-loaded')" alt="如何通过 performance.measure 精准测量并上报用户点击到首屏图像完全加载的感知耗时" >
若使用懒加载（loading="lazy"），需改用loading="eager"或监听IntersectionObserver+decode()后再 mark，确保测量的是“真正可见且加载完”的状态
用 measure 提取并上报耗时
在图像加载完成的回调里，立刻调用 measure 并上报：
- 执行测量：
performance.measure('click-to-hero-load', 'user-click-to-detail', 'detail-hero-loaded'); - 获取结果：
const entry = performance.getEntriesByName('click-to-hero-load')[0];<br>const duration = Math.round(entry.duration); // 单位：毫秒 - 轻量上报（避免阻塞）：
使用navigator.sendBeacon发送 POST 请求，例如：sendBeacon('/log', JSON.stringify({ metric: 'click-to-hero-load', value: duration, url: location.href }));
注意事项与避坑点
几个容易导致数据失真的细节必须处理：
-
跨页面丢失 marks：如果点击触发的是全量跳转（非单页），上一页面打的 mark 会在新页面清空。解决方案是改用
sessionStorage记录点击时间戳，新页读取后与图像 load 时间差值计算 —— 但需注意同源限制 -
图像未加载成功也需上报：给
加 onerror 回调，同样打标（如 'detail-hero-error'），measure 后上报失败标记，便于区分是网络问题还是逻辑问题
- 避免重复打点：同一页面只允许一次 'detail-hero-loaded'，可用布尔变量或 removeEventListener 防止多次触发
-
iOS Safari 兼容性：performance.mark/measurement 在部分旧版 iOS Safari 中不可靠，建议 fallback 到
Date.now()差值法作为兜底
