如何准确监控前端页面的首屏加载时间？

用 performance.measure 记录 navigationStart 到首个可见元素渲染完的时间。监听 data-testid="hero" 元素的 onLoad 事件，记录时间戳。代码示例：

const hero = document.querySelector('[data-testid="hero"]');

let startTime = performance.now();

hero.onload = () => {

  performance.measure('firstScreen', 'navigationStart', 'now');

}

注意处理懒加载情况就行。

domContentLoadedEventEnd 这个确实不靠谱，它只是 DOM 解析完成的时间点，跟用户真正看到首屏内容差远了。特别是 React 这种框架，渲染完还要走一遍生命周期，而且懒加载图片根本不算在内。

你现在有两个思路可以结合起来用。

第一，用 PerformanceObserver 监控 LCP（Largest Contentful Paint），这个是目前比较公认的指标。代码大概这样：

const observer = new PerformanceObserver((list) => {

  const entries = list.getEntries();

  const lastEntry = entries[entries.length - 1];

  console.log('LCP时间:', lastEntry.startTime);

  // 上报逻辑

});

observer.observe({ type: 'largest-contentful-paint', buffered: true });

第二，针对你标记的 data-testid="hero" 元素，可以用 MutationObserver 配合 requestAnimationFrame 来精确检测。思路是监听目标元素是否渲染完成且在视口内。

function measureHeroRender() {

  const heroElements = document.querySelectorAll('[data-testid="hero"]');

  if (heroElements.length === 0) return;

  

  const startTime = performance.now();

  

  const checkRender = () => {

    let allRendered = true;

    

    heroElements.forEach(el => {

      const rect = el.getBoundingClientRect();

      const inViewport = rect.top < window.innerHeight && rect.bottom > 0;

      

      if (inViewport) {

        const images = el.querySelectorAll('img');

        images.forEach(img => {

          if (!img.complete) allRendered = false;

        });

      }

    });

    

    if (allRendered) {

      const endTime = performance.now();

      console.log('首屏渲染时间:', endTime - startTime);

    } else {

      requestAnimationFrame(checkRender);

    }

  };

  

  requestAnimationFrame(checkRender);

}

有几个安全相关的点要注意。你的 data-testid 属性值别用动态拼接的，虽然前端相对安全，但保持好习惯没坏处。上报性能数据时，URL 参数要做白名单校验，别把用户的敏感信息比如 token、userId 一起带上去。如果用 sendBeacon 上报，注意数据大小限制，超了会被静默丢弃。

还有个坑，图片懒加载的情况下上面的代码可能不准确。你需要给首屏关键图片加个标记，比如 data-hero-img，然后单独监听这些图片的 onload 事件：

const heroImages = document.querySelectorAll('[data-testid="hero"] img[data-hero-img]');

let loadedCount = 0;

const totalImages = heroImages.length;



if (totalImages === 0) {

  console.log('首屏渲染完成:', performance.now());

}



heroImages.forEach(img => {

  if (img.complete) {

    loadedCount++;

    if (loadedCount === totalImages) {

      console.log('首屏图片全部加载完成:', performance.now());

    }

  } else {

    img.onload = img.onerror = () => {

      loadedCount++;

      if (loadedCount === totalImages) {

        console.log('首屏图片全部加载完成:', performance.now());

      }

    };

  }

});

对了，上报数据记得用 navigator.sendBeacon 而不是普通的 fetch，这样页面关闭时数据不会丢。还有性能数据属于用户隐私范畴，最好在隐私政策里说明一下，避免合规问题。