计算项目首屏时间

1.performance

const startTime = window.performance.timing.navigationStart; // 获取页面开始加载的时间点
const whiteScreenTime = window.performance.timing.domLoading - startTime; 
// 获取白屏时间console.log(`白屏时间：${whiteScreenTime}ms`);

window.addEventListener('load', () => {  
  const firstPaintTime = window.performance.getEntriesByType('paint')[0].startTime; // FP   
  const firstContentPaintTime = window.performance.getEntriesByType('paint')[1].startTime;           // FCP
});

2.MutationObserver

初始化MutationObserver监听： 在页面加载后，通过JavaScript代码创建一个MutationObserver对象，并注册一个回调函数。回调函数会在DOM树中的元素发生变化时自动触发
利用 body 稳定

const observer = new MutationObserver(callback);
observer.observe(document, {
  childList: true, // 监测子节点的变化（元素的添加或删除）
  subtree: true // 监测子树的变化（深层元素的修改）
});

function callback(mutationsList) {
  let firstScreenTime = 0;
  mutationsList.forEach(mutation => {
    // 只关注DOM元素的添加和属性变化
    if ((mutation.type === 'attributes' && mutation.attributeName === 'style') ||                 mutation.type === 'childList') {
      // 检查DOM元素的变化
      // 你可以在这里根据项目需要查找首屏元素的特定条件，比如特定的CSS类或ID
      if (!document.querySelector('.loading').style.display) {
        // 页面首屏渲染完毕，首屏元素被找到，记录首屏时间
        firstScreenTime = performance.now();
        // 停止观察，避免重复计算首屏时间
        observer.disconnect();
      }
    }
  });
  if (firstScreenTime > 0) {
    console.log(`首屏时间：${firstScreenTime}ms`);
    // 可以在这里执行首屏渲染完毕后的操作
  }
}