React 项目中监控白屏 / 首屏时间

/**
 * React 白屏/首屏时间监控工具
 * 兼容 React 18 并发渲染、TS/JS 项目
 */
export function monitorReactPerformance({
  // 自定义首屏元素选择器（如首页的核心内容区）
  firstScreenSelector = '#root > div',
  // 数据上报回调
  onReport = (data) => console.log('性能数据：', data)
} = {}) {
  // 基础变量：页面加载起始时间（替代废弃的 performance.timing）
  const pageStartTime = performance.now();
  // 存储最终指标
  const performanceData = {
    whiteScreenTime: 0, // 白屏时间（FP/FCP）
    firstScreenTime: 0, // 首屏时间（LCP/自定义）
    fp: 0, // 首次绘制
    fcp: 0, // 首次内容绘制
    lcp: 0, // 最大内容绘制（首屏核心指标）
    pageUrl: window.location.href,
    timestamp: Date.now()
  };

  // ========== 1. 监听浏览器原生性能指标（FP/FCP/LCP） ==========
  if ('PerformanceObserver' in window) {
    // 监听 FP/FCP（白屏时间核心）
    const paintObserver = new PerformanceObserver((entryList) => {
      for (const entry of entryList.getEntries()) {
        if (entry.name === 'first-paint') {
          performanceData.fp = entry.startTime;
          performanceData.whiteScreenTime = entry.startTime; // FP 作为白屏时间兜底
        }
        if (entry.name === 'first-contentful-paint') {
          performanceData.fcp = entry.startTime;
          performanceData.whiteScreenTime = entry.startTime; // FCP 更贴近业务白屏
        }
      }
      paintObserver.disconnect(); // 监听一次即可
    });
    paintObserver.observe({ entryTypes: ['paint'] });

    // 监听 LCP（首屏时间核心，推荐）
    const lcpObserver = new PerformanceObserver((entryList) => {
      const lcpEntry = entryList.getEntries()[0];
      if (lcpEntry) {
        performanceData.lcp = lcpEntry.startTime;
        performanceData.firstScreenTime = lcpEntry.startTime; // LCP 作为首屏时间
        onReport({ ...performanceData }); // 拿到LCP立即上报
      }
    });
    lcpObserver.observe({ entryTypes: ['largest-contentful-paint'] });
  }

  // ========== 2. React 挂载完成后计算自定义首屏时间（兜底） ==========
  function calculateCustomFirstScreen() {
    // 找首屏核心元素（过滤文本/注释节点）
    function getFirstScreenElement() {
      const el = document.querySelector(firstScreenSelector);
      if (!el) return null;
      // 确保是元素节点
      return el.nodeType === 1 ? el : null;
    }

    // 检查元素是否真正渲染（有布局信息）
    function checkElementRendered() {
      const targetEl = getFirstScreenElement();
      if (!targetEl) {
        // 重试5次，每次间隔100ms
        const retryCount = checkElementRendered.retryCount || 0;
        if (retryCount < 5) {
          checkElementRendered.retryCount = retryCount + 1;
          setTimeout(checkElementRendered, 100);
        } else {
          // 无目标元素，用当前时间兜底
          performanceData.firstScreenTime = performance.now() - pageStartTime;
          onReport({ ...performanceData });
        }
        return;
      }

      try {
        // 校验方法存在性，避免报错
        if (typeof targetEl.getClientRects === 'function') {
          const rects = targetEl.getClientRects();
          if (rects && rects.length > 0) {
            // 自定义首屏时间 = 元素渲染时间 - 页面启动时间
            performanceData.firstScreenTime = performance.now() - pageStartTime;
            // 若原生LCP未触发，更新白屏时间
            if (!performanceData.whiteScreenTime) {
              performanceData.whiteScreenTime = performanceData.firstScreenTime - 100; // 合理偏移
            }
            onReport({ ...performanceData });
            return;
          }
        }
      } catch (err) {
        console.warn('检查首屏元素失败：', err);
      }

      // 异常兜底
      performanceData.firstScreenTime = performance.now() - pageStartTime;
      onReport({ ...performanceData });
    }

    // 确保React渲染完成后执行
    setTimeout(checkElementRendered, 0); // 微任务队列执行，保证React已挂载
  }

  // ========== 3. 暴露给React根组件的挂载回调 ==========
  return {
    // React根组件挂载完成后调用此方法
    onReactMounted: calculateCustomFirstScreen,
    // 手动触发上报（备用）
    report: () => onReport({ ...performanceData })
  };
}