面试题：Vue项目中如何监控首屏加载时间这一性能指标

方法一：Performance API

原理：
- Performance API 提供了一系列接口，用于测量网页性能。其中performance.timing包含了许多与页面加载相关的时间戳。例如，可以通过performance.timing.domContentLoadedEventEnd - performance.timing.navigationStart获取 DOM 加载完成的时间，通过performance.timing.loadEventEnd - performance.timing.navigationStart获取页面完全加载完成的时间。在 Vue 项目中，首屏加载完成可以近似认为 DOM 加载完成且相关数据请求完成并渲染。可以在 Vue 应用的入口文件（如main.js）中使用该 API 来记录时间。
适用场景：
- 适用于开发环境和生产环境，在开发环境中方便开发人员了解首屏加载的各个阶段时间，定位性能瓶颈；在生产环境中可以通过上报这些数据到监控平台，了解用户端首屏加载情况。它能精确测量浏览器层面的加载时间，对性能优化有很大帮助。

方法二：自定义埋点

原理：
- 在 Vue 项目中，可以在首屏组件的mounted钩子函数中记录一个时间点，在项目入口文件（main.js）初始化时记录另一个时间点，两个时间点的差值即为首屏加载时间。例如：

// main.js
const startTime = new Date().getTime();
// 首屏组件
export default {
  mounted() {
    const endTime = new Date().getTime();
    const loadTime = endTime - startTime;
    // 这里可以将loadTime上报到监控平台
  }
}

适用场景：
- 适用于生产环境中对首屏加载时间进行业务层面的监控。因为是基于业务组件的挂载来计算时间，更符合业务上对首屏加载完成的定义，能准确反映用户看到首屏内容的时间。并且可以方便地与业务逻辑结合，比如在不同业务场景下进行首屏加载时间的针对性监控。

星途面试题库

面试题：Vue项目中如何监控首屏加载时间这一性能指标

知识考点

面试题答案

方法一：Performance API

方法二：自定义埋点