单页应用性能追踪：如何获取所有HTTP请求总网络等待时间？

方法一：用浏览器Performance API编写脚本 #

浏览器原生的Performance API可以捕获页面所有资源请求的性能数据，我们可以通过它计算所有HTTP请求的TTFB（即网络等待时间，从请求发出到收到第一个响应字节的时长）总和。

直接在浏览器控制台执行以下脚本（需确保所有目标请求已完成）：

// 获取所有资源请求的性能记录
const resourceEntries = performance.getEntriesByType('resource');
let totalWaitTime = 0;

resourceEntries.forEach(entry => {
  // 仅统计HTTP/HTTPS请求，过滤非网络请求（如本地资源）
  if (entry.name.startsWith('http') && entry.responseStart > entry.requestStart) {
    // 计算单个请求的网络等待时间（TTFB）
    const ttfb = entry.responseStart - entry.requestStart;
    totalWaitTime += ttfb;
  }
});

console.log(`总网络等待时间：${totalWaitTime}ms`);

如果要单独统计XHR或Fetch请求，可修改判断条件：

if (['xmlhttprequest', 'fetch'].includes(entry.initiatorType)) {
  const ttfb = entry.responseStart - entry.requestStart;
  totalWaitTime += ttfb;
}

方法二：Chrome DevTools手动统计 #

1. 按F12打开Chrome开发者工具，切换到Network面板
2. 勾选Disable cache选项，刷新页面或触发单页应用的目标加载流程
3. 右键点击Network表格的表头，勾选**Waiting (TTFB)**列（若未显示）
4. 右键点击Waiting (TTFB)列，选择Sum，DevTools会自动计算所有请求的等待时间总和

注意事项 #

• 单页应用的请求多为动态触发（如路由切换、懒加载），需在所有目标请求完成后再执行统计
• 跨域请求若未配置Timing-Allow-Origin响应头，部分性能字段会被隐藏，无法准确计算其等待时间

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