优化成本

简介

使用 Puppeteer 进行数据抓取时，流量消耗是一个重要的考虑因素。尤其是在使用代理服务时，流量成本可能会显著增加。为了优化流量使用，我们可以采用以下策略：

资源拦截: 通过拦截不必要的资源请求来减少流量消耗。
请求 URL 拦截: 基于 URL 特性拦截特定请求，进一步减少流量。
模拟移动设备: 使用移动设备配置获取更轻量级的页面版本。
综合优化: 将以上方法结合起来以达到最佳效果。

优化方案一：资源拦截

资源拦截简介

在 Puppeteer 中，page.setRequestInterception(true) 可以捕获浏览器发起的每一个网络请求，并决定继续(request.continue()), 终止(request.abort()), 或自定义响应(request.respond())。

此方法可以显著减少带宽消耗，尤其适用于爬取、截图和性能优化场景。

可拦截资源类型及建议

资源类型	描述	示例	拦截后的影响	建议
`image`	图片资源	JPG/PNG/GIF/WebP 图片	图片将不会显示	⭐ 安全
`font`	字体文件	TTF/WOFF/WOFF2 字体	将使用系统默认字体	⭐ 安全
`media`	媒体文件	视频/音频文件	媒体内容无法播放	⭐ 安全
`manifest`	Web 应用清单	PWA 配置文件	PWA 功能可能受影响	⭐ 安全
`prefetch`	预取资源	`<link rel="prefetch">`	对页面的影响极小	⭐ 安全
`stylesheet`	CSS 样式表	外部 CSS 文件	页面样式丢失，可能影响布局	⚠️ 注意
`websocket`	WebSocket	实时通信连接	实时功能失效	⚠️ 注意
`eventsource`	服务器发送事件	服务器推送数据	推送功能失效	⚠️ 注意
`preflight`	CORS 预检请求	OPTIONS 请求	跨域请求失败	⚠️ 注意
`script`	JavaScript 脚本	外部 JS 文件	动态功能失效，SPA 可能无法渲染	❌ 避免
`xhr`	XHR 请求	AJAX 数据请求	无法获取动态数据	❌ 避免
`fetch`	Fetch 请求	现代 AJAX 请求	无法获取动态数据	❌ 避免
`document`	主文档	HTML 页面本身	页面无法加载	❌ 避免

建议等级说明：

⭐ 安全: 拦截几乎不影响数据抓取或首屏渲染；建议默认拦截。
⚠️ 注意: 可能破坏样式、实时功能或跨域请求；需要根据业务判断。
❌ 避免: 极大可能会导致 SPA/动态网站无法正常渲染或获取数据，除非您绝对确定不需要这些资源。

资源拦截示例代码

import puppeteer from 'puppeteer-core';
 
const scrapelessUrl = 'wss://browser.scrapeless.com/browser?token=your_api_key&session_ttl=180&proxy_country=ANY';
 
async function scrapeWithResourceBlocking(url) {
    const browser = await puppeteer.connect({
        browserWSEndpoint: scrapelessUrl,
        defaultViewport: null
    });
    const page = await browser.newPage();
 
    // Enable request interception
    await page.setRequestInterception(true);
 
    // Define resource types to block
    const BLOCKED_TYPES = new Set([
        'image',
        'font',
        'media',
        'stylesheet',
    ]);
 
    // Intercept requests
    page.on('request', (request) => {
        if (BLOCKED_TYPES.has(request.resourceType())) {
            request.abort();
            console.log(`Blocked: ${request.resourceType()} - ${request.url().substring(0, 50)}...`);
        } else {
            request.continue();
        }
    });
 
    await page.goto(url, {waitUntil: 'domcontentloaded'});
 
    // Extract data
    const data = await page.evaluate(() => {
        return {
            title: document.title,
            content: document.body.innerText.substring(0, 1000)
        };
    });
 
    await browser.close();
    return data;
}
 
// Usage
scrapeWithResourceBlocking('https://www.scrapeless.com')
    .then(data => console.log('Scraping result:', data))
    .catch(error => console.error('Scraping failed:', error));

优化方案二：请求 URL 拦截

除了按资源类型拦截外，还可以基于 URL 特性进行更细粒度的拦截控制。这对于拦截广告、分析脚本和其他不必要的第三方请求特别有效。

URL 拦截策略

按域名拦截: 拦截来自特定域名的所有请求
按路径拦截: 拦截来自特定路径的请求
按文件类型拦截: 拦截具有特定扩展名的文件
按关键字拦截: 拦截 URL 包含特定关键字的请求

常用可拦截 URL 模式

URL 模式	描述	示例	建议
广告服务	广告网络域名	`ad.doubleclick.net`, `googleadservices.com`	⭐ 安全
分析服务	统计和分析脚本	`google-analytics.com`, `hotjar.com`	⭐ 安全
社交媒体插件	社交分享按钮等	`platform.twitter.com`, `connect.facebook.net`	⭐ 安全
追踪像素	追踪用户行为的像素	包含 `pixel`、`beacon`、`tracker` 的 URL	⭐ 安全
大型媒体文件	大型视频、音频文件	`.mp4`、`.webm`、`.mp3` 等扩展名	⭐ 安全
字体服务	在线字体服务	`fonts.googleapis.com`, `use.typekit.net`	⭐ 安全
CDN 资源	静态资源 CDN	`cdn.jsdelivr.net`, `unpkg.com`	⚠️ 注意

URL 拦截示例代码

import puppeteer from 'puppeteer-core';
 
const scrapelessUrl = 'wss://browser.scrapeless.com/browser?token=your_api_key&session_ttl=180&proxy_country=ANY';
 
async function scrapeWithUrlBlocking(url) {
    const browser = await puppeteer.connect({
        browserWSEndpoint: scrapelessUrl,
        defaultViewport: null
    });
    const page = await browser.newPage();
 
    // Enable request interception
    await page.setRequestInterception(true);
 
    // Define domains and URL patterns to block
    const BLOCKED_DOMAINS = [
        'google-analytics.com',
        'googletagmanager.com',
        'doubleclick.net',
        'facebook.net',
        'twitter.com',
        'linkedin.com',
        'adservice.google.com',
    ];
 
    const BLOCKED_PATHS = [
        '/ads/',
        '/analytics/',
        '/pixel/',
        '/tracking/',
        '/stats/',
    ];
 
    // Intercept requests
    page.on('request', (request) => {
        const url = request.url();
 
        // Check domain
        if (BLOCKED_DOMAINS.some(domain => url.includes(domain))) {
            request.abort();
            console.log(`Blocked domain: ${url.substring(0, 50)}...`);
            return;
        }
 
        // Check path
        if (BLOCKED_PATHS.some(path => url.includes(path))) {
            request.abort();
            console.log(`Blocked path: ${url.substring(0, 50)}...`);
            return;
        }
 
        // Allow other requests
        request.continue();
    });
 
    await page.goto(url, {waitUntil: 'domcontentloaded'});
 
    // Extract data
    const data = await page.evaluate(() => {
        return {
            title: document.title,
            content: document.body.innerText.substring(0, 1000)
        };
    });
 
    await browser.close();
    return data;
}
 
// Usage
scrapeWithUrlBlocking('https://www.scrapeless.com')
    .then(data => console.log('Scraping result:', data))
    .catch(error => console.error('Scraping failed:', error));

优化方案三：模拟移动设备

模拟移动设备是另一种有效的流量优化策略，因为移动网站通常提供更轻量级的页面内容。

模拟移动设备的优势

更轻量级的页面版本: 许多网站为移动设备提供更简洁的内容
更小的图片资源: 移动版本通常加载更小的图片
简化的 CSS 和 JavaScript: 移动版本通常使用简化的样式和脚本
减少广告和非核心内容: 移动版本通常会移除一些非核心功能
自适应响应: 获取针对小屏幕优化的内容布局

移动设备模拟配置

以下是几种常用移动设备的配置参数：

const iPhoneX = {
    viewport: {
        width: 375,
        height: 812,
        deviceScaleFactor: 3,
        isMobile: true,
        hasTouch: true,
        isLandscape: false
    }
};

或者直接使用 puppeteer 的内置方法模拟移动设备

import { KnownDevices } from 'puppeteer-core';
const iPhone = KnownDevices['iPhone 15 Pro'];
 
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.emulate(iPhone);

移动设备模拟示例代码

import puppeteer, {KnownDevices} from 'puppeteer-core';
 
const scrapelessUrl = 'wss://browser.scrapeless.com/browser?token=your_api_key&session_ttl=180&proxy_country=ANY';
 
async function scrapeWithMobileEmulation(url) {
    const browser = await puppeteer.connect({
        browserWSEndpoint: scrapelessUrl,
        defaultViewport: null
    });
 
    const page = await browser.newPage();
 
    // Set mobile device simulation
    const iPhone = KnownDevices['iPhone 15 Pro'];
    await page.emulate(iPhone);
 
    await page.goto(url, {waitUntil: 'domcontentloaded'});
    // Extract data
    const data = await page.evaluate(() => {
        return {
            title: document.title,
            content: document.body.innerText.substring(0, 1000)
        };
    });
 
    await browser.close();
    return data;
}
 
// Usage
scrapeWithMobileEmulation('https://www.scrapeless.com')
    .then(data => console.log('Scraping result:', data))
    .catch(error => console.error('Scraping failed:', error));

综合优化示例

这是一个结合所有优化方案的综合示例：

import puppeteer, {KnownDevices} from 'puppeteer-core';
 
const scrapelessUrl = 'wss://browser.scrapeless.com/browser?token=your_api_key&session_ttl=180&proxy_country=ANY';
 
async function optimizedScraping(url) {
    console.log(`Starting optimized scraping: ${url}`);
 
    // Record traffic usage
    let totalBytesUsed = 0;
 
    const browser = await puppeteer.connect({
        browserWSEndpoint: scrapelessUrl,
        defaultViewport: null
    });
 
    const page = await browser.newPage();
 
    // Set mobile device simulation
    const iPhone = KnownDevices['iPhone 15 Pro'];
    await page.emulate(iPhone);
 
    // Set request interception
    await page.setRequestInterception(true);
 
    // Define resource types to block
    const BLOCKED_TYPES = [
        'image',
        'media',
        'font'
    ];
 
    // Define domains to block
    const BLOCKED_DOMAINS = [
        'google-analytics.com',
        'googletagmanager.com',
        'facebook.net',
        'doubleclick.net',
        'adservice.google.com'
    ];
 
    // Define URL paths to block
    const BLOCKED_PATHS = [
        '/ads/',
        '/analytics/',
        '/tracking/'
    ];
 
    // Intercept requests
    page.on('request', (request) => {
        const url = request.url();
        const resourceType = request.resourceType();
 
        // Check resource type
        if (BLOCKED_TYPES.includes(resourceType)) {
            console.log(`Blocked resource type: ${resourceType} - ${url.substring(0, 50)}...`);
            request.abort();
            return;
        }
 
        // Check domain
        if (BLOCKED_DOMAINS.some(domain => url.includes(domain))) {
            console.log(`Blocked domain: ${url.substring(0, 50)}...`);
            request.abort();
            return;
        }
 
        // Check path
        if (BLOCKED_PATHS.some(path => url.includes(path))) {
            console.log(`Blocked path: ${url.substring(0, 50)}...`);
            request.abort();
            return;
        }
 
        // Allow other requests
        request.continue();
    });
 
    // Monitor network traffic
    page.on('response', async (response) => {
        const headers = response.headers();
        const contentLength = headers['content-length'] ? parseInt(headers['content-length'], 10) : 0;
        totalBytesUsed += contentLength;
    });
 
    await page.goto(url, {waitUntil: 'domcontentloaded'});
 
    // Simulate scrolling to trigger lazy-loading content
    await page.evaluate(() => {
        window.scrollBy(0, window.innerHeight);
    });
 
    await new Promise(resolve => setTimeout(resolve, 1000))
 
    // Extract data
    const data = await page.evaluate(() => {
        return {
            title: document.title,
            content: document.body.innerText.substring(0, 1000),
            links: Array.from(document.querySelectorAll('a')).slice(0, 10).map(a => ({
                text: a.innerText,
                href: a.href
            }))
        };
    });
 
    // Output traffic usage statistics
    console.log(`\nTraffic Usage Statistics:`);
    console.log(`Used: ${(totalBytesUsed / 1024 / 1024).toFixed(2)} MB`);
 
    await browser.close();
    return data;
}
 
// Usage
optimizedScraping('https://www.scrapeless.com')
    .then(data => console.log('Scraping complete:', data))
    .catch(error => console.error('Scraping failed:', error));

优化对比

我们尝试从综合示例中移除优化代码，以比较优化前后流量。以下是未优化的示例代码：

import puppeteer from 'puppeteer-core';
 
const scrapelessUrl = 'wss://browser.scrapeless.com/browser?token=your_api_key&session_ttl=180&proxy_country=ANY';
 
async function unoptimizedScraping(url) {
  console.log(`Starting unoptimized scraping: ${url}`);
 
  // Record traffic usage
  let totalBytesUsed = 0;
 
  const browser = await puppeteer.connect({
    browserWSEndpoint: scrapelessUrl,
    defaultViewport: null
  });
 
  const page = await browser.newPage();
 
  // Set request interception
  await page.setRequestInterception(true);
 
  // Intercept requests
  page.on('request', (request) => {
    request.continue();
  });
 
  // Monitor network traffic
  page.on('response', async (response) => {
    const headers = response.headers();
    const contentLength = headers['content-length'] ? parseInt(headers['content-length'], 10) : 0;
    totalBytesUsed += contentLength;
  });
 
  await page.goto(url, {waitUntil: 'domcontentloaded'});
 
  // Simulate scrolling to trigger lazy-loading content
  await page.evaluate(() => {
    window.scrollBy(0, window.innerHeight);
  });
 
  await new Promise(resolve => setTimeout(resolve, 1000))
 
  // Extract data
  const data = await page.evaluate(() => {
    return {
      title: document.title,
      content: document.body.innerText.substring(0, 1000),
      links: Array.from(document.querySelectorAll('a')).slice(0, 10).map(a => ({
        text: a.innerText,
        href: a.href
      }))
    };
  });
 
  // Output traffic usage statistics
  console.log(`\nTraffic Usage Statistics:`);
  console.log(`Used: ${(totalBytesUsed / 1024 / 1024).toFixed(2)} MB`);
 
  await browser.close();
  return data;
}
 
// Usage
unoptimizedScraping('https://www.scrapeless.com')
  .then(data => console.log('Scraping complete:', data))
  .catch(error => console.error('Scraping failed:', error));

运行未优化代码后，我们可以从打印的信息中直观地看到流量差异：

场景	流量使用 (MB)	节省比例
未优化	6.03	—
优化后	0.81	≈ 86.6 %

通过结合上述优化方案，可以显著降低代理流量消耗，提高抓取效率，并确保获取所需的核心内容。

Browser Use 网络爬取中的绕过Cloudflare