如何在 H5 和小程序项目中计算白屏时间和首屏时间

记录页面开始加载的时间点，可以使用 performance.timing 对象的 fetchStart 属性或者 performance.now() 方法获取当前时间戳。

记录页面 DOMContentLoaded 事件的时间点，可以使用 performance.timing 对象的 domContentLoadedEventEnd 属性或者添加 DOMContentLoaded 事件监听器并在回调函数中记录当前时间戳。

记录页面首屏内容加载完成的时间点，可以在页面中标记首屏元素并在元素加载完成后记录当前时间戳。

计算白屏时间，即页面开始加载到 DOMContentLoaded 事件的时间差。

计算首屏时间，即页面开始加载到首屏内容加载完成的时间差。

const startTime = performance.now();

// 添加 DOMContentLoaded 事件监听器
document.addEventListener('DOMContentLoaded', () => {
  // 记录 DOMContentLoaded 事件的时间点
  const domContentLoadedTime = performance.now();

  // 计算白屏时间
  const whiteScreenTime = domContentLoadedTime - startTime;
  console.log(`白屏时间：${whiteScreenTime}ms`);
});

// 标记首屏元素
const firstScreenElement = document.querySelector('#first-screen');

// 添加首屏元素加载完成的事件监听器
firstScreenElement.addEventListener('load', () => {
  // 记录首屏内容加载完成的时间点
  const firstScreenTime = performance.now();

  // 计算首屏时间
  const firstScreenLoadTime = firstScreenTime - startTime;
  console.log(`首屏时间：${firstScreenLoadTime}ms`);
});

其他

Performance.now() 方法和 Date.now() 方法都可以用于获取当前时间戳，但它们的实现方式有所不同，因此它们的精度和用途也不同。

Performance.now() 方法返回的是相对于页面加载开始的时间戳，精度为微秒级别，而 Date.now() 方法返回的是相对于 1970 年 1 月 1 日的时间戳，精度为毫秒级别。

在计算白屏时间和首屏时间时，使用 Performance.now() 方法可以更精确地计算出时间差，避免了由于系统时间被修改或网络延迟等因素导致的误差。此外，Performance.now() 方法还可以用于测量代码执行时间和性能瓶颈等，是一个比较常用的工具。

需要注意的是，由于 Performance.now() 方法返回的是相对时间戳，因此在不同页面或多次刷新页面时，它的起始时间可能会不同，需要进行相应的处理。

利用 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
});