vue计算白屏时间；vue计算首屏时间

---

参考

API：performance.timing 提供了从页面开始加载到页面完全加载的各种时间戳。

链接1
链接2

---

一、四个时间计算？

1. 白屏时间

const whiteScreenTime = timing.responseStart - timing.navigationStart;

计算从用户开始请求页面到浏览器开始接收到响应的时间，即白屏时间（用户看到空白页面的时间）。

2.首屏时间

const paintEntries = performance.getEntriesByType('paint');
const firstContentfulPaint = paintEntries.find(entry => entry.name === 'first-contentful-paint');
 if (firstContentfulPaint) {
   console.log('First Contentful Paint Time:', firstContentfulPaint.startTime);
}

获取所有的绘制相关的性能条目。特别是 first-contentful-paint (FCP)，它表示页面上第一个内容（文本或图像）被渲染到屏幕上的时间。

3. 页面可交互时间:即DOM完全渲染时间

const domReadyTime = timing.domContentLoadedEventEnd - timing.navigationStart;

计算从页面开始加载到 DOM 内容加载完成的时间（即 DOM 完全就绪的时间）。

4. 加载完成时间

const loadTime = timing.loadEventEnd - timing.navigationStart;

计算从页面开始加载到所有资源（如图像、样式表等）都完全加载完成的时间。

二、使用

1.创建公共方法和在路由使用

创建一个工具函数来集中处理性能统计的代码。这样可以在多个地方调用，确保性能统计代码的一致性和重用性。

// utils/performance.js
export function logPerformanceMetrics() {
  // 白屏时间
  const timing = performance.timing;
  const whiteScreenTime = timing.responseStart - timing.navigationStart;
  
  // 首屏时间
  const paintEntries = performance.getEntriesByType('paint');
  const firstContentfulPaint = paintEntries.find(entry => entry.name === 'first-contentful-paint');
  
  // 可交互时间
  const domReadyTime = timing.domContentLoadedEventEnd - timing.navigationStart;

  // 完全加载时间
  const loadTime = timing.loadEventEnd - timing.navigationStart;
  
  // 打印结果
  console.log('White Screen Time:', whiteScreenTime);
  if (firstContentfulPaint) {
    console.log('First Contentful Paint Time:', firstContentfulPaint.startTime);
  } else {
    console.log('First Contentful Paint data not available.');
  }
  console.log('Time to Interactive:', domReadyTime);
  console.log('Load Time:', loadTime);
}

页面内容是通过异步组件加载的，确保 logPerformanceMetrics 函数在每个页面加载完成后执行。如果使用了 Vue Router，可能需要在路由守卫中调用该函数：

// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import { logPerformanceMetrics } from '../utils/performance';

const routes = [
  // 你的路由配置
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

router.afterEach(() => {
  logPerformanceMetrics(); // 每次路由跳转后记录性能数据
});

export default router;