如何自动化捕获Chrome网络面板所有请求并解决性能API缓冲区重置问题

嘿，我刚好碰到过一模一样的问题！你遇到的缓冲区刷新后重置的情况是浏览器的默认行为——每次页面刷新，Performance API的资源计时缓冲区都会自动回到默认的150条限制。不过有几个实用的办法能帮你稳定捕获所有请求，顺利生成加载耗时报告：

1. 尽早同步设置缓冲区大小 #

要确保缓冲区在页面开始加载资源前就被调大，你需要把设置脚本放在<head>的最顶部，并且用同步脚本执行。这样就能避免早期的资源请求因为缓冲区还没调整而被漏掉：

<head>
  <!-- 放在所有其他资源之前的同步脚本 -->
  <script>
    // 检查浏览器支持性，然后设置足够大的缓冲区（比如1000条，可按需调整）
    if (window.performance && performance.setResourceTimingBufferSize) {
      performance.setResourceTimingBufferSize(1000);
    }
  </script>
  <!-- 其他head内容：样式、meta标签等 -->
</head>

2. 监听缓冲区满事件，动态扩容 #

如果你的页面请求量特别大，或者不确定需要多大的缓冲区，可以监听resourcetimingbufferfull事件。当缓冲区快满时，自动扩容，确保不会丢失任何请求：

// 监听缓冲区即将耗尽的事件
performance.addEventListener('resourcetimingbufferfull', () => {
  // 基于当前已有的请求数，额外增加500条缓冲区空间（可按需调整增量）
  const currentCount = performance.getEntriesByType('resource').length;
  performance.setResourceTimingBufferSize(currentCount + 500);
});

3. SPA场景的特殊处理 #

如果是单页应用（SPA），因为页面不会整体刷新，只需要在应用初始化的入口文件里设置一次缓冲区大小即可，后续路由切换都能保持这个设置：

// SPA入口文件（比如main.js）
if (window.performance && performance.setResourceTimingBufferSize) {
  performance.setResourceTimingBufferSize(2000); // 根据你的应用请求量调整
}

生成加载耗时报告的小技巧 #

等页面加载完成后，你可以通过performance.getEntriesByType('resource')获取所有资源请求数据，然后计算单个请求耗时和页面总加载时间：

window.addEventListener('load', () => {
  const resourceEntries = performance.getEntriesByType('resource');
  
  // 生成单个请求的耗时报告
  const requestReport = resourceEntries.map(entry => ({
    请求URL: entry.name,
    耗时: `${entry.duration.toFixed(2)}ms`,
    开始时间: `${entry.startTime.toFixed(2)}ms`
  }));
  
  // 计算页面总加载时间（从第一个请求发起，到最后一个请求完成的时长）
  const totalLoadTime = resourceEntries.length 
    ? `${(resourceEntries.at(-1).startTime + resourceEntries.at(-1).duration - resourceEntries[0].startTime).toFixed(2)}ms`
    : '0ms';

  console.log('单个请求耗时报告:', requestReport);
  console.log('页面总加载耗时:', totalLoadTime);
});

这样就能完美解决缓冲区重置的问题，同时顺利生成你需要的加载耗时报告啦！

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