如何通过CDP协议或DevTools控制台获取特定资源的加载时间？

你之前用performance.getEntries()的方式只能拿到缓存加载的时间，想要获取包括非缓存场景的真实加载时间，可以按以下两种方式操作：

一、DevTools控制台方法 #

1. 禁用缓存后获取性能数据 #

在DevTools的「Network」面板勾选「Disable cache」，刷新页面后再执行性能查询代码，同时把你代码里的item.name.indexOf('')改成目标资源的URL关键词（比如item.name.indexOf('main.css') > -1），示例：

performance.getEntries().find(item => item.initiatorType === 'link' && item.name.includes('main.css'))?.duration

这样拿到的就是从服务器加载资源的真实耗时。

2. 查看细分的加载阶段耗时 #

如果需要更细致的时间指标（比如DNS、TCP连接、请求响应阶段的耗时），可以直接获取资源的完整性能条目：

const resourceEntry = performance.getEntriesByName('https://xxx.com/main.css')[0];
if (resourceEntry) {
  console.log('DNS查询耗时:', resourceEntry.domainLookupEnd - resourceEntry.domainLookupStart);
  console.log('TCP连接耗时:', resourceEntry.connectEnd - resourceEntry.connectStart);
  console.log('请求响应耗时:', resourceEntry.responseEnd - resourceEntry.requestStart);
  console.log('完整加载耗时:', resourceEntry.duration);
}

3. 实时监听资源加载（避免缓存干扰） #

用PerformanceObserver可以在资源加载过程中实时捕获数据，无需刷新页面也能拿到非缓存的加载时间：

const observer = new PerformanceObserver(list => {
  for (const entry of list.getEntries()) {
    if (entry.initiatorType === 'link' && entry.name.includes('main.css')) {
      console.log('资源完整加载耗时:', entry.duration);
      // 按需打印细分耗时
      console.log('请求到响应完成耗时:', entry.responseEnd - entry.requestStart);
    }
  }
});
observer.observe({ entryTypes: ['resource'] });

二、CDP协议方法 #

通过Chrome DevTools Protocol（CDP）的网络监控API，可以直接获取资源加载的全链路时间，以Puppeteer为例（它封装了CDP）：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  
  // 启用网络请求拦截与监控
  await page.setRequestInterception(true);
  page.on('request', req => req.continue());
  
  // 监听响应事件，获取资源加载时序
  page.on('response', async res => {
    const url = res.url();
    if (url.includes('main.css') && res.request().initiator().type === 'link') {
      const timing = await res.timing();
      // 计算真实加载时间：从请求发起至响应完成的耗时
      const loadTime = timing.responseEnd - timing.requestStart;
      console.log(`${url} 的加载时间：${loadTime}ms`);
    }
  });
  
  await page.goto('你的目标页面URL', { waitUntil: 'networkidle2' });
  await browser.close();
})();

为什么之前的方法只返回缓存时间？ #

当资源从浏览器缓存加载时，performance.getEntries()返回的duration会非常小（甚至接近0），因为浏览器跳过了网络请求环节。只有禁用缓存或捕获首次加载的资源，才能拿到从服务器获取资源的真实耗时。

内容的提问来源于stack exchange，提问作者吹个大气球