Всички публикации

Browser Tasks: Как да скрапваме сайтове с интензивно използване на JavaScript

Над 70% от съвременните уебсайтове изискват JavaScript, за да рендерират съдържанието си. Ето как browser tasks на FourA ви осигуряват пълната страница, когато HTTP requests връщат празен резултат.

Над 70% от съвременните уебсайтове разчитат на JavaScript, за да рендерират съдържанието си. Стандартната HTTP request вижда само първоначалния HTML shell. Същинските данни се зареждат след изпълнението на JavaScript, поради което традиционните инструменти за скрапване връщат празни страници.

Browser tasks на FourA решават този проблем, като стартират реална headless Chrome инстанция за всяка request.

Как работи

Когато изпратите task с type: "browser", FourA:

  1. Стартира headless Chrome браузър
  2. Навигира до целевия URL
  3. Изчаква JavaScript да се изпълни и DOM да се стабилизира
  4. Опционално изчаква появата на конкретен CSS selector
  5. Връща напълно рендерирания HTML

Целият процес се случва в инфраструктурата на FourA. Получавате чист HTML обратно, без да се налага да инсталирате браузър, да конфигурирате Puppeteer или да управлявате актуализации на Chrome.

Кога да използвате Browser Tasks

Използвайте browser tasks, когато:

  • Single-page applications (React, Vue, Angular)
  • Страници с lazy-loaded съдържание (безкрайно превъртане, бутони „зареди още“)
  • Сайтове, които изискват съгласие за cookie или първоначална JS настройка
  • Съдържание зад процеси за клиентска автентификация (client-side authentication)

Придържайте се към single tasks, когато:

  • Server-rendered HTML страници (новинарски сайтове, блогове, уикита)
  • REST APIs, които връщат директно JSON
  • Скоростта е приоритет (изпълнението на browser tasks отнема 2-10 секунди срещу под 1 секунда за single tasks)

Пример: Скрапване на React приложение

curl -X POST https://eu.api.foura.ai/api/v1/tasks \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://example.com/dashboard",
    "type": "browser",
    "options": {
      "waitFor": ".dashboard-content",
      "timeout": 15000
    }
  }'

Селекторът waitFor указва на FourA да изчака, докато .dashboard-content се появи в DOM, преди да заснеме страницата. Това гарантира, че всички асинхронни данни са заредени.

Съвети за производителност

  • Винаги използвайте waitFor с конкретен селектор, вместо да разчитате на timeouts. Това е както по-бързо, така и по-надеждно.
  • Задайте разумен timeout. 15 секунди са достатъчни за повечето SPAs. Увеличавайте го само за наистина бавни backends.
  • Използвайте single по подразбиране и преминавайте към browser само когато съдържанието липсва в отговора (response).

Какво предстои

Работим по допълнителни възможности за браузъра, включително заснемане на екранни снимки (screenshots), генериране на PDF и навигация в няколко стъпки (кликване, превъртане, попълване на форми). Но дори и без тези екстри, browser tasks вече се справят с най-често срещания проблем: извличане на същинското съдържание от рендерирани с JavaScript страници вместо празен shell.

Разгледайте документацията за пълно сравнение на видовете tasks.