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;