如何用JavaScript测量AJAX渲染页面的DOM内容加载时间？

开发者阿泽

2026-5-12

这个问题确实是单页应用（SPA）性能测量里的常见坑——传统的performance.timing是为整页刷新设计的，路由切换时页面并没有重新加载，所以那些值自然不会更新。针对AngularJS这类SPA，我有几个靠谱的方案来测量DOM内容加载时间：

方案1：利用框架自身的生命周期钩子（最准确）

AngularJS本身提供了路由相关的事件，比如$routeChangeStart和$routeChangeSuccess，你可以借助这些事件精准标记页面切换的开始和结束时间：

在路由开始切换时，用performance.mark()打一个起始标记：

angular.module('yourApp').run(['$rootScope', function($rootScope) {
  $rootScope.$on('$routeChangeStart', function() {
    performance.mark('spa_route_start');
  });
}]);

在路由切换完成（此时对应页面的DOM已经渲染完毕）时，打一个结束标记，并计算两者的时间差：

angular.module('yourApp').run(['$rootScope', function($rootScope) {
  $rootScope.$on('$routeChangeSuccess', function() {
    performance.mark('spa_route_end');
    // 测量两个标记之间的时间差
    performance.measure('spa_dom_load_time', 'spa_route_start', 'spa_route_end');
    // 获取测量结果
    const measure = performance.getEntriesByName('spa_dom_load_time')[0];
    console.log(`DOM内容加载时间：${measure.duration}ms`);
    // 清理已使用的标记和测量，避免内存占用
    performance.clearMarks('spa_route_start');
    performance.clearMarks('spa_route_end');
    performance.clearMeasures('spa_dom_load_time');
  });
}]);

这个方案的优势在于完全贴合框架的渲染流程，时间点最精准，因为AngularJS的$routeChangeSuccess事件就是在路由对应的视图渲染完成后触发的。

方案2：结合AJAX请求与DOM变化监听（通用型，不依赖框架）

如果你的场景里AJAX请求完成后才开始渲染DOM，你可以结合AJAX拦截和MutationObserver来测量：

拦截AJAX请求，在请求发起时记录起始时间：

// 示例：拦截XMLHttpRequest
const originalOpen = XMLHttpRequest.prototype.open;
XMLHttpRequest.prototype.open = function(method, url) {
  if (url.includes('your-api-endpoint')) { // 匹配你的数据接口
    performance.mark('ajax_request_start');
  }
  return originalOpen.apply(this, arguments);
};

在AJAX请求完成后，监听目标内容区域的DOM变化，当DOM停止更新一段时间后，认为渲染完成：

const contentContainer = document.getElementById('main-content'); // 你的主内容容器
let domChangeTimer;

const observer = new MutationObserver(function(mutations) {
  // 每次DOM变化时重置定时器
  clearTimeout(domChangeTimer);
  domChangeTimer = setTimeout(function() {
    performance.mark('dom_render_complete');
    performance.measure('dom_load_time', 'ajax_request_start', 'dom_render_complete');
    const measure = performance.getEntriesByName('dom_load_time')[0];
    console.log(`DOM内容加载时间：${measure.duration}ms`);
    // 停止监听，避免重复触发
    observer.disconnect();
    // 清理标记和测量
    performance.clearMarks('ajax_request_start');
    performance.clearMarks('dom_render_complete');
    performance.clearMeasures('dom_load_time');
  }, 100); // 100ms无变化则认为渲染完成，可根据实际调整
});

// 监听内容容器的子元素、文本等变化
observer.observe(contentContainer, {
  childList: true,
  subtree: true,
  characterData: true
});

这个方案不依赖特定框架，适合各种SPA场景，但需要根据你的页面结构调整监听容器和定时器阈值。

方案3：使用Performance Observer监听自定义标记（进阶用法）

如果你在多个地方有渲染操作，可以用Performance Observer来统一监听自定义的performance标记，灵活性更高：

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.name === 'spa_dom_ready') {
      // 结合起始标记计算时间差
      const startMark = performance.getEntriesByName('spa_route_start')[0];
      if (startMark) {
        const duration = entry.startTime - startMark.startTime;
        console.log(`DOM内容加载时间：${duration}ms`);
      }
    }
  }
});

// 监听mark类型的性能条目
observer.observe({ entryTypes: ['mark'] });

// 在DOM渲染完成的地方打标记，比如AngularJS控制器初始化后
angular.module('yourApp').controller('YourController', function() {
  // 假设控制器初始化完成后DOM已渲染完毕
  performance.mark('spa_dom_ready');
});

核心思路总结：浏览器原生的performance.timing只跟踪整页加载的生命周期，而SPA的局部渲染不在这个范围内，所以我们需要手动标记SPA页面切换过程中的关键时间点，再通过performance.mark()和performance.measure()来计算DOM加载耗时。

内容的提问来源于stack exchange，提问作者user6882962