首屏加载耗时应以用户真实可见内容完成渲染为准，核心是捕获首屏内关键内容（文字、图片、区块）全部可见的时刻；推荐优先采用lcp指标，因其基于浏览器绘制流水线、精度高且语义明确，可配合fcp交叉验证，避免依赖domcontentloaded或load等易失真事件。
首屏加载耗时是衡量用户真实感知速度的核心指标，统计的关键在于“用户看到首屏内容那一刻”的准确定义和可靠捕获。它不是单纯等 DOM 构建完成，也不是所有图片加载完，而是首屏可视区域内所有关键内容（文字、图片、重要区块）完成渲染并可见的时间点。
基于浏览器原生 API 的基础统计
适用于静态页面或简单 SPA：
- 用 performance.timing 获取粗略参考：首屏时间 ≈
domContentLoadedEventEnd - navigationStart，但该值仅反映 DOM 就绪，不包含图片、字体、异步组件渲染，容易低估 - 监听 DOMContentLoaded 和 load 事件可辅助判断，但
load等待全部资源（含非首屏广告图），常严重高估 - 更合理起点是
navigationStart（用户触发跳转/输入 URL 时刻），终点需自定义，不能只依赖内置事件
首屏图片驱动法（主流实用方案）
多数页面首屏核心内容是图片（Banner、头图、商品主图），因此以首屏内所有图片的 load 事件中最晚触发者为准：
- 页面加载初期，遍历
document.querySelectorAll('img')，筛选出getBoundingClientRect()显示在视口内的图片 - 为每张首屏图片绑定
load或error回调，记录完成时间戳 - 页面
load后检查所有首屏图片是否已加载；若未完成，可设兜底超时（如 10s）取最后加载完成时间 - 注意兼容处理：IE 中 GIF 可能重复触发
load，需在回调中清空img.onload = null
MutationObserver + 首屏元素检测法（适合 Vue/React 动态渲染）
框架应用中 DOM 常异步挂载，图片可能延迟插入，此时需监听 DOM 变化而非初始 HTML：
- 创建 MutationObserver 监听
document.body，配置{ childList: true, subtree: true } - 每次回调中，扫描新增节点是否在首屏内（
el.getBoundingClientRect().top ），且包含文本、<code><img>或带背景图的容器 - 对符合条件的新元素，记录其插入时间；当首屏区域不再有新内容出现（配合防抖或
setTimeout判定稳定），取最后插入元素的时间作为首屏时间 - 若首屏无图片，可退化为监听
document.readyState === 'interactive'或使用requestIdleCallback检测主线程空闲后文字渲染完成
现代指标替代与补充（推荐结合使用）
Chrome 已逐步推广更科学的用户感知指标，建议同步采集，用于交叉验证：
-
FCP（First Contentful Paint）：首个文本、图像、
<svg></svg>或非空白<canvas></canvas>渲染时间，通过PerformanceObserver订阅paint类型获取 - LCP（Largest Contentful Paint）：首屏中最大内容块（通常是大图或标题）的渲染时间，更能代表“首屏完成”体验
- 二者均基于浏览器底层绘制流水线，不受 JS 执行顺序干扰，精度高、语义清晰，应作为首屏监控的主力数据源
