如何限制Puppeteer的资源渲染与请求发送？

嘿，这个需求太实用了——第三方分析、广告类请求不仅拖慢渲染速度，还可能消耗不必要的资源。用Puppeteer拦截这类请求其实很简单，核心就是利用它的请求拦截功能，我给你一步步拆解：

Puppeteer提供了page.setRequestInterception()方法，开启后可以监听并控制页面发出的每一个请求。我们只需要定义黑名单规则，把Google Analytics、Facebook这类第三方请求直接abort（阻止），只允许必要的页面资源请求通过。

1. 开启请求拦截 #

首先要在页面初始化阶段开启请求拦截，这是整个功能的前提：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({ headless: 'new' });
  const page = await browser.newPage();
  
  // 开启请求拦截，必须在page.goto之前调用
  await page.setRequestInterception(true);

2. 定义拦截规则 #

根据需求，我们可以把需要拦截的第三方域名、资源关键词整理成一个黑名单数组。比如Google Analytics的google-analytics.com、Facebook的facebook.com/fbcdn.net，还有常见的分析脚本如gtag.js：

// 可根据实际需求扩展这个黑名单
const blockedTargets = [
  'google-analytics.com',
  'facebook.com',
  'fbcdn.net',
  'gtag.js',
  'analytics.js',
  'facebook.net',
  'googletagmanager.com' // 很多网站用GTM加载GA，建议加上
];

3. 监听并处理请求 #

通过page.on('request')事件监听每个请求，判断请求URL是否命中黑名单，命中则阻止，否则允许正常加载：

page.on('request', (request) => {
  const requestUrl = request.url();
  // 检查请求是否命中黑名单
  const shouldBlock = blockedTargets.some(target => requestUrl.includes(target));
  
  if (shouldBlock) {
    // 阻止请求发送，也可以用request.abort('aborted')指定错误类型
    request.abort();
    console.log(`已拦截第三方请求: ${requestUrl}`);
  } else {
    // 允许正常请求继续
    request.continue();
  }
});

完整可运行示例 #

把上面的代码整合起来，就是一个完整的拦截脚本：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({ headless: 'new' });
  const page = await browser.newPage();
  
  // 开启请求拦截
  await page.setRequestInterception(true);

  // 自定义拦截黑名单
  const blockedTargets = [
    'google-analytics.com',
    'facebook.com',
    'fbcdn.net',
    'gtag.js',
    'analytics.js',
    'facebook.net',
    'googletagmanager.com'
  ];

  // 处理每个请求
  page.on('request', (request) => {
    const requestUrl = request.url();
    const shouldBlock = blockedTargets.some(target => requestUrl.includes(target));
    
    if (shouldBlock) {
      request.abort();
    } else {
      request.continue();
    }
  });

  // 访问目标页面，这里替换成你要渲染的页面URL
  await page.goto('https://example.com', { waitUntil: 'domcontentloaded' });

  // 这里添加你的页面处理逻辑，比如获取内容、截图等
  const pageContent = await page.content();
  console.log(`页面渲染完成，已拦截第三方请求`);

  await browser.close();
})();

进阶优化建议 #

• 按资源类型拦截：如果想进一步提速，可以拦截非必要的资源类型（比如图片、样式表），结合黑名单一起使用：

  page.on('request', (request) => {
    const blockedResourceTypes = ['image', 'stylesheet'];
    const isUnnecessaryResource = blockedResourceTypes.includes(request.resourceType());
    const isBlockedTarget = blockedTargets.some(target => request.url().includes(target));
    
    if (isUnnecessaryResource || isBlockedTarget) {
      request.abort();
    } else {
      request.continue();
    }
  });
  

• 正则表达式匹配：对于更复杂的URL规则，可以用正则表达式替代字符串包含判断，比如精准匹配GA的收集请求：

  const gaCollectRegex = /google-analytics\.com\/collect/i;
  if (gaCollectRegex.test(request.url())) {
    request.abort();
  }
  

• 注意事项：开启请求拦截后，所有请求必须手动处理（要么abort要么continue），否则页面会一直处于加载状态无法完成。

内容的提问来源于stack exchange，提问作者Emiliano Isaza Villamizar