计算白屏时间

使用 Performance API 可以更精确地测量白屏时间。Performance API 提供了 PerformanceObserver 接口，可以监听页面的首次绘制（first-paint）事件。以下是一个示例代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./main.js"></script>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <script>
      // 性能 观察器   观察者模式
      const observer = new PerformanceObserver((list) => {
        // 获取所有的 性能 指标
        const entries = list.getEntries();
        for (const entry of entries) {
          // body 里的第一个 标签的渲染
          // 'first-paint' 表示页面首次开始绘制的时间点，也就是白屏结束的时间点
          if (entry.name === "first-paint") {
            const whiteScreenTime = entry.startTime;
            console.log(`白屏时间：${whiteScreenTime}ms`);
          }
        }
      });
      // 首次绘制  first-paint
      // 首次内容绘制  first-contentful-paint 事件
      // observe 监听性能指标
      // buffered 属性设置为 true，表示包含性能时间线缓冲区中已经记录的相关事件
      // 这样即使在创建 PerformanceObserver 之前事件已经发生，也能被捕获到
      observer.observe({ type: "paint", buffered: true });
    </script>
  </body>
</html>