Vue hash路由如何获取菜单页面打开加载性能数据？

Question

背景：Vue的单页面项目需要做埋点记录页面（菜单）打开加载时间。因为菜单页面的打开切换关闭是通过hash路由改变来控制的，这个无法通过浏览器提供的 Performance API 来计算菜单页面打开相关加载指标。

具体问题：对于路由变更时打开的页面，我想记录页面空白时间、dom加载完毕时间以及整个页面加载完毕时间。我现在是在路由后置守卫中去处理，用requestAnimationFrame这些，感觉计算差距比较大，不太准确。想请教一下获取这三个指标分别的方法？

Answer 1

阿里嘎多学长整理AIGC生成，因移动端显示问题导致当前答案未能完全显示，请使用PC端查看更加详细的解答过程

Vue hash路由如何获取菜单页面打开加载性能数据？

你想知道如何在 Vue 单页面项目中使用 hash 路由来记录菜单页面打开加载时间。由于菜单页面的打开切换关闭是通过 hash 路由改变来控制的，这个无法通过浏览器提供的 Performance API 来计算菜单页面打开时间。

解决方案：

1. 使用 beforeEach 导航守卫来记录菜单页面打开时间

const router = new VueRouter({
  // ...
  beforeEach(to, from) {
    if (to.path === '/menu') {
      // 记录菜单页面打开时间
      console.log(`Menu page opened at ${new Date().getTime()}`);
    }
  }
})

1. 使用 afterEach 导航守卫来记录菜单页面关闭时间

const router = new VueRouter({
  // ...
  afterEach(to, from) {
    if (to.path === '/menu') {
      // 记录菜单页面关闭时间
      console.log(`Menu page closed at ${new Date().getTime()}`);
    }
  }
})

1. 使用 performance API 来计算菜单页面打开时间

const router = new VueRouter({
  // ...
  beforeEach(to, from) {
    if (to.path === '/menu') {
      const startTime = performance.now();
      // 记录菜单页面打开时间
      console.log(`Menu page opened at ${startTime}`);
    }
  }
  afterEach(to, from) {
    if (to.path === '/menu') {
      const endTime = performance.now();
      // 计算菜单页面打开时间
      const loadTime = endTime - startTime;
      console.log(`Menu page loaded in ${loadTime}ms`);
    }
  }
})

这些方法可以帮助你记录菜单页面打开加载时间，并且可以根据需要进行调整和优化。