如何可靠计算Above the Fold内容视觉完成时间及资源加载状态？

你的核心需求是用浏览器API判断首屏所有资源（包括外部CSS、字体、图片）加载并渲染完成的时间，用来模拟SpeedIndex，这个思路方向是对的，但现有实现有几个可以优化的点，能解决你遇到的慢网络、频繁触发和CPU开销问题。下面是具体的改进方案：

一、优化首屏元素检测：用IntersectionObserver代替全量遍历 #

你当前的getRects函数遍历所有DOM元素，在复杂页面中CPU开销很大，而且重复执行会更糟。改用IntersectionObserver可以只监听进入视口的元素，大幅降低性能消耗，还能自动处理滚动懒加载的场景：

// 配置IntersectionObserver，只检测首屏内的元素
const observerOptions = {
  root: null, // 用视口作为根
  rootMargin: '0px',
  threshold: 0.01 // 元素只要有1%进入视口就算首屏元素
};

const aboveFoldElements = new Set();
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // 处理图片元素
      if (entry.target.tagName === 'IMG') {
        aboveFoldElements.add({
          type: 'img',
          url: entry.target.src,
          rect: entry.boundingClientRect
        });
      }
      // 处理带背景图的元素
      const style = getComputedStyle(entry.target);
      const bgImage = style['background-image'];
      if (bgImage && bgImage !== 'none') {
        const urlMatch = bgImage.match(/url\(["']?(.*?)["']?\)/);
        if (urlMatch?.[1]) {
          aboveFoldElements.add({
            type: 'bg-image',
            url: urlMatch[1],
            rect: entry.boundingClientRect
          });
        }
      }
      // 监听一次后可以取消，避免重复触发（如果不需要滚动懒加载的后续元素）
      observer.unobserve(entry.target);
    }
  });
}, observerOptions);

// 初始遍历需要监听的元素类型
document.querySelectorAll('img, [style*="background-image"]').forEach(el => {
  observer.observe(el);
});

二、精准监听所有首屏相关资源的加载 #

你当前只监听了resource类型的性能条目，但漏掉了字体加载和CSS内部引用的资源（比如背景图、@font-face），这些都是首屏视觉完成的关键：

1. 监听字体加载完成 #

用document.fonts.ready Promise来判断所有字体是否加载完成，它会等待页面中用到的所有字体（包括CSS中@font-face定义的）加载完成：

document.fonts.ready.then(() => {
  console.log('所有字体已加载完成');
});

2. 监听CSS资源及其依赖 #

通过PerformanceObserver监听resource条目，过滤出CSS文件，同时还要跟踪这些CSS加载后触发的后续资源请求（比如背景图、字体）：

const resourceMap = new Map();
const perfObserver = new PerformanceObserver((list) => {
  list.getEntries().forEach(entry => {
    if (entry.entryType === 'resource') {
      resourceMap.set(entry.name, {
        type: entry.initiatorType,
        status: entry.responseStatus === 200 ? 'loaded' : 'failed',
        endTime: entry.responseEnd
      });
      // 如果是CSS资源，重置等待计时器（因为CSS加载会触发后续资源请求）
      if (entry.initiatorType === 'css') {
        resetIdleTimer();
      }
    }
  });
});

perfObserver.observe({ entryTypes: ['resource', 'layout-shift'] });

三、处理持续活跃的页面（如每秒轮询的聊天应用） #

你的现有方案依赖2秒空闲窗口，但持续有请求的页面永远触发不了。可以做两个改进：

• 设置最大等待时间（比如10秒），到时间后强制收集数据
• 结合layout-shift（CLS）指标，当连续一段时间没有布局偏移时，认为首屏视觉稳定

let lastLayoutShiftTime = 0;
let idleTimer;
const MAX_WAIT_TIME = 10000; // 最大等待10秒
const IDLE_THRESHOLD = 2000; // 空闲阈值2秒
const STABLE_LAYOUT_THRESHOLD = 1500; // 1.5秒无布局偏移

// 重置空闲计时器
function resetIdleTimer() {
  clearTimeout(idleTimer);
  idleTimer = setTimeout(checkCompletion, IDLE_THRESHOLD);
}

// 监听布局偏移
const layoutObserver = new PerformanceObserver((list) => {
  list.getEntries().forEach(entry => {
    if (entry.value > 0.01) { // 只关注有意义的布局偏移
      lastLayoutShiftTime = performance.now();
      resetIdleTimer();
    }
  });
});

layoutObserver.observe({ entryTypes: ['layout-shift'] });

// 强制超时触发
setTimeout(checkCompletion, MAX_WAIT_TIME);

// 检查是否完成的核心函数
async function checkCompletion() {
  // 等待字体加载完成
  await document.fonts.ready;
  // 检查是否超过布局稳定阈值
  const now = performance.now();
  if (now - lastLayoutShiftTime < STABLE_LAYOUT_THRESHOLD) {
    resetIdleTimer();
    return;
  }
  // 检查所有首屏资源是否已加载
  const allLoaded = Array.from(aboveFoldElements).every(el => {
    const resource = resourceMap.get(el.url);
    return resource?.status === 'loaded';
  });
  if (allLoaded) {
    // 收集数据并发送到服务器
    sendDataToServer({
      aboveFoldElements: Array.from(aboveFoldElements),
      completionTime: performance.now(),
      metrics: {
        LCP: performance.getEntriesByType('largest-contentful-paint')[0]?.startTime
      }
    });
    // 停止所有监听
    observer.disconnect();
    perfObserver.disconnect();
    layoutObserver.disconnect();
  } else {
    // 还有资源未加载，继续等待
    resetIdleTimer();
  }
}

四、结合Performance API的关键指标辅助判断 #

除了自己监听资源，还可以利用浏览器原生的性能指标来验证：

• Largest Contentful Paint (LCP)：首屏最大内容元素的加载时间，可以作为参考，但LCP不包含所有首屏元素
• First Contentful Paint (FCP)：首次内容绘制时间，作为早期参考点
• Cumulative Layout Shift (CLS)：布局偏移总和，当CLS稳定时说明首屏视觉不再变化

这些指标可以通过performance.getEntriesByType()获取，用来补充你自己收集的数据。

五、总结改进后的流程 #

1. 用IntersectionObserver自动收集首屏内的图片和背景图元素
2. 用PerformanceObserver监听所有资源加载和布局偏移
3. 用document.fonts.ready等待字体加载完成
4. 结合空闲时间、最大等待时间和布局稳定阈值，判断首屏是否完成
5. 收集所有数据后，通过单次请求发送到服务器

这个方案解决了你之前的几个痛点：

• 减少了首屏元素检测的CPU开销（从全量遍历变为按需监听）
• 覆盖了字体、CSS依赖等之前漏掉的关键资源
• 处理了持续活跃页面的情况（最大等待时间+布局稳定检测）

内容的提问来源于stack exchange，提问作者GrahamTheDev