fp，fcp，lcp,fmp计算时间

if ('PerformanceObserver' in window) {
  let lcp;

  const observer = new PerformanceObserver((entryList) => {
    const entries = entryList.getEntries();
    lcp = entries[entries.length - 1]; // 记录最后一个 LCP 条目
    console.log('LCP candidate:', lcp);
  });

  // 开始监听 'largest-contentful-paint' 类型的性能事件
  observer.observe({ type: 'largest-contentful-paint', buffered: true });

  // 监听用户与页面交互（如滚动、点击等）并停止观察器
  ['click', 'scroll', 'keydown', 'pointerdown'].forEach((event) => {
    window.addEventListener(event, () => {
      observer.disconnect();
      console.log('Final LCP:', lcp); // 最终的 LCP
    }, { once: true });
  });
}



if ('PerformanceObserver' in window) {
  const observer = new PerformanceObserver((list) => {
    const entries = list.getEntries();
    entries.forEach((entry) => {
      if (entry.name === 'first-paint') {
        console.log('FP (First Paint) time:', entry.startTime);
      }
      if (entry.name === 'first-contentful-paint') {
        console.log('FCP (First Contentful Paint) time:', entry.startTime);
      }
    });
  });

  // 监听 'paint' 类型的性能条目，包括 FP 和 FCP
  observer.observe({ type: 'paint', buffered: true });
}



let fmpTime = 0;

// 监测某个重要元素的可见性
const checkVisibility = () => {
  const targetElement = document.querySelector('.important-element'); // 选择一个关键元素
  if (targetElement && isElementInViewport(targetElement)) {
    fmpTime = performance.now(); // 记录时间
    console.log('First Meaningful Paint Time:', fmpTime);
    return; // 一旦检测到，结束监测
  }
  requestAnimationFrame(checkVisibility); // 继续检查
};

// 判断元素是否在视口中
const isElementInViewport = (el) => {
  const rect = el.getBoundingClientRect();
  return (
    rect.top < (window.innerHeight || document.documentElement.clientHeight) &&
    rect.bottom > 0 &&
    rect.left < (window.innerWidth || document.documentElement.clientWidth) &&
    rect.right > 0
  );
};

// 等待 DOM 加载完成再启动检测
document.addEventListener('DOMContentLoaded', () => {
  requestAnimationFrame(checkVisibility);
});