JavaScript多用サイトのスクレイピング方法

JavaScript-レンダリングコンテンツの課題

近代的なウェブサイトは、JavaScriptに依存してコンテンツをレンダリングします。 React、Vue、Angular が最小限の HTML シェルをロードし、データクライアント側をフェッチしてレンダリングするシングルページアプリケーション(SPAs)。 これらのサイトへの単純なHTTPリクエストを作成すると、JavaScriptの実行後にのみコンテンツが存在するため、空のページや不完全なページが取得されます。

JavaScript-heavyのウェブサイトをスクレイピングする必要があります ヘッドレスブラウザ — ブラウザのエンジンは、JavaScript を実行したり、 DOM をレンダリングしたり、ページ要素とやり取りしたりできる目に見えるウィンドウなしで実行できます。 プロキシと組み合わせ、ヘッドレスブラウザは、最も動的ウェブサイトからデータをロック解除します。

このガイドは私たちの一部です ウェブスクレイピングプロキシの完全なガイド. ヘッドレスブラウザを使用している間検出を避けるため、参照 アンチボットシステムがプロキシを検出する方法. .

ヘッドレスブラウザが必要な場合は?

ヘッドレスブラウザに到達する前に、サイトにAPIやサーバー側のレンダリングがある場合に常にチェックします。 多くの "JavaScript-heavy" サイトは、実際にクリーンなJSONを返すAPIエンドポイントを持っています。

Puppeteer + プロキシ (Node.js)

Puppeteerはプログラム的にChrome/Chromiumを制御します。 Node.js 用の最も成熟したヘッドレスブラウザツールです。

ProxyHatによる基本的なセットアップ

const puppeteer = require('puppeteer');
async function scrapeWithPuppeteer(url) {
  const browser = await puppeteer.launch({
    headless: 'new',
    args: [
      '--proxy-server=http://gate.proxyhat.com:8080',
      '--no-sandbox',
      '--disable-setuid-sandbox',
      '--disable-dev-shm-usage',
    ],
  });
  const page = await browser.newPage();
  // Authenticate with proxy
  await page.authenticate({
    username: 'USERNAME',
    password: 'PASSWORD',
  });
  // Set realistic viewport and user agent
  await page.setViewport({ width: 1920, height: 1080 });
  await page.setUserAgent(
    'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 ' +
    '(KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36'
  );
  try {
    await page.goto(url, { waitUntil: 'networkidle2', timeout: 60000 });
    // Wait for specific content to render
    await page.waitForSelector('.product-list', { timeout: 10000 });
    const content = await page.content();
    const data = await page.evaluate(() => {
      return Array.from(document.querySelectorAll('.product-item')).map(el => ({
        name: el.querySelector('.product-name')?.textContent?.trim(),
        price: el.querySelector('.product-price')?.textContent?.trim(),
        url: el.querySelector('a')?.href,
      }));
    });
    return { html: content, data };
  } finally {
    await browser.close();
  }
}
// Usage
const result = await scrapeWithPuppeteer('https://example.com/products');
console.log(`Found ${result.data.length} products`);

最適化されたマルチページスクレイピング

const puppeteer = require('puppeteer');
class PuppeteerScraper {
  constructor(concurrency = 3) {
    this.concurrency = concurrency;
    this.browser = null;
  }
  async init() {
    this.browser = await puppeteer.launch({
      headless: 'new',
      args: [
        '--proxy-server=http://gate.proxyhat.com:8080',
        '--no-sandbox',
        '--disable-setuid-sandbox',
        '--disable-dev-shm-usage',
        '--disable-gpu',
        '--disable-extensions',
      ],
    });
  }
  async scrapePage(url) {
    const page = await this.browser.newPage();
    await page.authenticate({ username: 'USERNAME', password: 'PASSWORD' });
    await page.setViewport({ width: 1920, height: 1080 });
    // Block unnecessary resources to speed up loading
    await page.setRequestInterception(true);
    page.on('request', (req) => {
      const type = req.resourceType();
      if (['image', 'stylesheet', 'font', 'media'].includes(type)) {
        req.abort();
      } else {
        req.continue();
      }
    });
    try {
      await page.goto(url, { waitUntil: 'networkidle2', timeout: 30000 });
      const content = await page.content();
      return { url, status: 'success', html: content };
    } catch (err) {
      return { url, status: 'error', error: err.message };
    } finally {
      await page.close();
    }
  }
  async scrapeMany(urls) {
    const results = [];
    for (let i = 0; i < urls.length; i += this.concurrency) {
      const batch = urls.slice(i, i + this.concurrency);
      const batchResults = await Promise.all(
        batch.map(url => this.scrapePage(url))
      );
      results.push(...batchResults);
      console.log(`Progress: ${results.length}/${urls.length}`);
    }
    return results;
  }
  async close() {
    if (this.browser) await this.browser.close();
  }
}
// Usage
const scraper = new PuppeteerScraper(3);
await scraper.init();
const results = await scraper.scrapeMany(urls);
await scraper.close();

Playwright + プロキシ (Python)

Playwrightは、Chromium、Firefox、WebKitをサポートする新しい代替手段です。 その Python API は、スクレイピングに適し、よく適しています。

基本セットアップ

from playwright.sync_api import sync_playwright
def scrape_with_playwright(url: str) -> dict:
    """Scrape a JavaScript-heavy page using Playwright with ProxyHat proxy."""
    with sync_playwright() as p:
        browser = p.chromium.launch(
            headless=True,
            proxy={
                "server": "http://gate.proxyhat.com:8080",
                "username": "USERNAME",
                "password": "PASSWORD",
            }
        )
        context = browser.new_context(
            viewport={"width": 1920, "height": 1080},
            user_agent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) "
                       "AppleWebKit/537.36 (KHTML, like Gecko) "
                       "Chrome/120.0.0.0 Safari/537.36",
        )
        page = context.new_page()
        try:
            page.goto(url, wait_until="networkidle", timeout=60000)
            # Wait for dynamic content
            page.wait_for_selector(".product-list", timeout=10000)
            # Extract data using page.evaluate
            products = page.evaluate("""() => {
                return Array.from(document.querySelectorAll('.product-item')).map(el => ({
                    name: el.querySelector('.product-name')?.textContent?.trim(),
                    price: el.querySelector('.product-price')?.textContent?.trim(),
                    url: el.querySelector('a')?.href,
                }));
            }""")
            return {"url": url, "products": products, "html": page.content()}
        finally:
            browser.close()

パラレルスクレイピングのためのAsync Playwright

import asyncio
from playwright.async_api import async_playwright
async def scrape_batch(urls: list[str], concurrency: int = 3) -> list[dict]:
    """Scrape multiple JS-heavy pages in parallel using Playwright."""
    results = []
    async with async_playwright() as p:
        browser = await p.chromium.launch(
            headless=True,
            proxy={
                "server": "http://gate.proxyhat.com:8080",
                "username": "USERNAME",
                "password": "PASSWORD",
            }
        )
        semaphore = asyncio.Semaphore(concurrency)
        async def scrape_one(url: str) -> dict:
            async with semaphore:
                context = await browser.new_context(
                    viewport={"width": 1920, "height": 1080},
                )
                page = await context.new_page()
                # Block heavy resources
                await page.route("**/*.{png,jpg,jpeg,gif,svg,css,woff,woff2}",
                                 lambda route: route.abort())
                try:
                    await page.goto(url, wait_until="networkidle", timeout=30000)
                    html = await page.content()
                    return {"url": url, "status": "success", "html": html}
                except Exception as e:
                    return {"url": url, "status": "error", "error": str(e)}
                finally:
                    await context.close()
        tasks = [scrape_one(url) for url in urls]
        results = await asyncio.gather(*tasks)
        await browser.close()
    return results
# Usage
urls = [f"https://example.com/product/{i}" for i in range(50)]
results = asyncio.run(scrape_batch(urls, concurrency=5))

Go: Proxies で chromedp を使用する

package main
import (
    "context"
    "fmt"
    "log"
    "time"
    "github.com/chromedp/chromedp"
)
func scrapeJSPage(targetURL string) (string, error) {
    // Configure proxy
    opts := append(chromedp.DefaultExecAllocatorOptions[:],
        chromedp.ProxyServer("http://gate.proxyhat.com:8080"),
        chromedp.Flag("headless", true),
        chromedp.Flag("disable-gpu", true),
        chromedp.Flag("no-sandbox", true),
        chromedp.UserAgent("Mozilla/5.0 (Windows NT 10.0; Win64; x64) "+
            "AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36"),
    )
    allocCtx, cancel := chromedp.NewExecAllocator(context.Background(), opts...)
    defer cancel()
    ctx, cancel := chromedp.NewContext(allocCtx)
    defer cancel()
    ctx, cancel = context.WithTimeout(ctx, 60*time.Second)
    defer cancel()
    var htmlContent string
    err := chromedp.Run(ctx,
        chromedp.Navigate(targetURL),
        chromedp.WaitVisible(".product-list", chromedp.ByQuery),
        chromedp.OuterHTML("html", &htmlContent),
    )
    if err != nil {
        return "", fmt.Errorf("scrape failed: %w", err)
    }
    return htmlContent, nil
}
func main() {
    html, err := scrapeJSPage("https://example.com/products")
    if err != nil {
        log.Fatal(err)
    }
    fmt.Printf("Got %d bytes of rendered HTML\n", len(html))
}

パフォーマンス最適化戦略

ヘッドレスブラウザは、シンプルなHTTPリクエストよりも10〜50x遅くなります。 パフォーマンスギャップを最小限に抑える戦略は次のとおりです。

1. 不要なリソースをブロックする

データ抽出には画像、CSS、フォント、メディアファイルは必要ありません。 ブロックすると、ページの読み込みが大幅に高速化されます。

# Playwright resource blocking
async def fast_scrape(page, url):
    # Block images, CSS, fonts, media
    await page.route("**/*.{png,jpg,jpeg,gif,svg,css,woff,woff2,mp4,webm}",
                     lambda route: route.abort())
    # Also block tracking scripts
    await page.route("**/*google-analytics*", lambda route: route.abort())
    await page.route("**/*facebook*", lambda route: route.abort())
    await page.goto(url, wait_until="domcontentloaded")  # Faster than networkidle
    return await page.content()

2. 右待ち戦略を使用する

3. ブラウザのインスタンスを再利用

ブラウザを起動すると1〜3秒かかります。 バッチスクレイピングのために、一度起動し、URLごとに新しいページ/コンテキストを作成します。

from playwright.sync_api import sync_playwright
class BrowserPool:
    """Reusable browser pool for efficient headless scraping."""
    def __init__(self, pool_size: int = 3):
        self.pool_size = pool_size
        self.playwright = None
        self.browsers = []
    def start(self):
        self.playwright = sync_playwright().start()
        for _ in range(self.pool_size):
            browser = self.playwright.chromium.launch(
                headless=True,
                proxy={
                    "server": "http://gate.proxyhat.com:8080",
                    "username": "USERNAME",
                    "password": "PASSWORD",
                }
            )
            self.browsers.append(browser)
    def get_browser(self, index: int):
        return self.browsers[index % self.pool_size]
    def stop(self):
        for browser in self.browsers:
            browser.close()
        self.playwright.stop()
# Usage
pool = BrowserPool(pool_size=3)
pool.start()
for i, url in enumerate(urls):
    browser = pool.get_browser(i)
    context = browser.new_context()
    page = context.new_page()
    page.goto(url, wait_until="networkidle")
    html = page.content()
    context.close()
pool.stop()

4。 API を傍受する代わりに DOM をパースする

多くのSPAはAPIからデータを取得します。 これらの API 呼び出しを直接傍受します。HTML をパースすることなく JSON をクリーンに取得できます。

const puppeteer = require('puppeteer');
async function interceptAPIData(url) {
  const browser = await puppeteer.launch({
    headless: 'new',
    args: ['--proxy-server=http://gate.proxyhat.com:8080'],
  });
  const page = await browser.newPage();
  await page.authenticate({ username: 'USERNAME', password: 'PASSWORD' });
  const apiResponses = [];
  // Intercept XHR/fetch responses
  page.on('response', async (response) => {
    const url = response.url();
    if (url.includes('/api/') || url.includes('/graphql')) {
      try {
        const json = await response.json();
        apiResponses.push({ url, data: json });
      } catch {
        // Not JSON, skip
      }
    }
  });
  await page.goto(url, { waitUntil: 'networkidle2' });
  await browser.close();
  return apiResponses;
}
// Get clean API data instead of scraping DOM
const data = await interceptAPIData('https://example.com/products');
console.log(`Intercepted ${data.length} API calls`);

ヘッドレスブラウザとHTTP比較

ベストプラクティス

• まずはHTTPをお試しください。 ヘッドレスブラウザを使用する前に、API エンドポイント、サーバーレンダリングコンテンツ、または HTML に埋め込まれた JSON をチェックします。
• 不要なリソースをブロックします。 画像、CSS、フォントは、データを提供せずに読み込み時間を追加します。
• 特定のセレクターを使用して待機します。 networkidle 安全ですが遅くなります。 必要な特定の要素を待ってください。
• ブラウザインスタンスを再利用します。 一度起動し、ページごとに新しいコンテキストを作成します。
• API 呼び出しを介入します。 多くのSPAは、JSONを直接傍受するAPI経由でデータをロードします。
• 通貨の制限 ヘッドレスブラウザはメモリインテンシブです。 3-5 RAMのGBごとの同時ページは良いルールです。
• 住宅用プロキシを使用してください。 ProxyHat住宅プロキシ ヘッドレスブラウザの実行時に検出を削減し、最高の信頼スコアを提供します。

ヘッドレスブラウザが遭遇するCAPTCHAの取り扱いについては、 CAPTCHAの取扱い スクレイピングするとき. 頭のないブラウザのスクレイピングをスケーリングするために、読みます スクレイピングインフラストラクチャをスケールする方法. .

始めよう Python SDK, ノードSDKまたは SDKについて プロキシの統合のために、および探検して下さい ウェブスクレイピング用のProxyHat. .

よくある質問

JavaScriptサイトのヘッドレスブラウザが必要ですか?

いいえ。 多くの JavaScript-heavy サイトは API エンドポイントからデータを読み込みます。 ブラウザのネットワークタブでXHR/fetchリクエストを確認してください。データがAPIから来ている場合は、プロキシを介したシンプルなHTTPリクエストで直接APIを呼び出すことができます。

Puppeteer または Playwright は、スクレーピングに適していますか?

Playwrightは一般的に新しいプロジェクトに推奨されます。 複数のブラウザエンジン(Chromium、Firefox、WebKit)をサポートし、自動待機、Pythonでのネイティブ非同期サポート、および組み込みプロキシ構成が向上しました。 Puppeteerはより成熟しており、Node.jsの世界にいるとより大きなエコシステムがあります。

ヘッドレスブラウザページは何ページでも同時実行できますか?

各ページは、200-500 MBのRAMを消費します。 8 GBのRAMを搭載したマシンでは、3-10の同時ページが現実的です。 リソースブロック(画像、CSS)を使用してメモリを削減します。 並列性が高いため、キューベースのアーキテクチャを使用して複数のマシン間で配布します。

なぜヘッドレスブラウザでプロキシを使用するのですか?

実際のブラウザでも、同じIPからの繰り返しリクエストがブロックされます。 プロキシは IP を回転させ、各ページの読み込みが異なるユーザーから来るように表示されます。 ProxyHatによる住宅用プロキシは、最も高い信頼スコアを提供し、ブロックとCAPTCHAを最小限に抑えます。