React中路由切换时页面加载时间计算方案求助

window.performance.timing 是为传统整页刷新场景设计的，单页应用（SPA）的路由切换属于"软导航"——不会触发浏览器完整的页面加载流程，因此 navigationStart、domContentLoadedEventEnd 这些时间戳始终是第一次页面加载时的值，不会随路由更新，导致计算结果失效。

方案一：自定义计时（通用适配所有SPA框架） #

这是最可靠的方案，通过手动记录路由切换的起始时间，在路由完成后计算时间差：

React Router 示例

import { useLocation, useEffect } from 'react-router-dom';

function TrackRouteLoadTime() {
  const location = useLocation();

  useEffect(() => {
    const routeStart = performance.now();
    // useEffect 在DOM更新完成后执行，此时可视为路由加载完成
    const loadTime = (performance.now() - routeStart) / 1000;
    console.log(`当前路由加载耗时：${loadTime.toFixed(2)}s`);
  }, [location]);

  return null;
}

Vue 3 示例

import { watch, onMounted } from 'vue';
import { useRoute } from 'vue-router';

export default {
  setup() {
    const route = useRoute();
    let routeStart;

    // 监听路由变化，记录起始时间
    watch(route, () => {
      routeStart = performance.now();
    }, { immediate: true });

    // 组件挂载完成（DOM更新后）计算耗时
    onMounted(() => {
      if (routeStart) {
        const loadTime = (performance.now() - routeStart) / 1000;
        console.log(`当前路由加载耗时：${loadTime.toFixed(2)}s`);
      }
    });
  }
};

方案二：使用Navigation Timing API Level 2（限现代浏览器） #

部分现代浏览器支持识别SPA软导航，并更新导航性能条目，可通过以下方式获取最新数据：

const navigationEntries = performance.getEntriesByType('navigation');
const latestEntry = navigationEntries.at(-1);

if (latestEntry) {
  const loadTime = (latestEntry.domContentLoadedEventEnd - latestEntry.navigationStart) / 1000;
  console.log(`加载耗时：${loadTime.toFixed(2)}s`);
}

注意：该方法依赖浏览器对软导航的支持，兼容性不如自定义计时。

方案三：统计路由切换时的资源加载时间 #

如果需要统计路由切换伴随的静态资源（如组件、图片）加载耗时，可使用PerformanceObserver监听资源加载：

// 初始化观察者
const resourceObserver = new PerformanceObserver((list) => {
  list.getEntries().forEach(entry => {
    console.log(`资源 ${entry.name} 加载耗时：${(entry.duration / 1000).toFixed(2)}s`);
  });
});
resourceObserver.observe({ entryTypes: ['resource'] });

// 路由切换时可清空旧记录，只统计当前路由的资源
// 示例：React Router中重置记录
useEffect(() => {
  // 清除已有的资源性能条目
  performance.getEntriesByType('resource').forEach(entry => performance.clearResourceTimings(entry.name));
}, [location]);

内容的提问来源于stack exchange，提问作者S Lokesh Kumar