Как парсить JavaScript-сайты и SPA-приложения

Проблема с JavaScript-сайтами

Более 70% современных сайтов используют JavaScript-фреймворки (React, Vue, Angular) для рендеринга контента. Когда вы отправляете обычный HTTP-запрос через requests или curl, сервер возвращает пустую HTML-оболочку:

<div id="root"></div>
<script src="/app.js"></script>

Весь контент (товары, цены, текст) загружается и отображается через JavaScript уже в браузере. Простой HTTP-клиент JavaScript не выполняет — и получает пустую страницу.

Как определить SPA

Признаки JavaScript-рендеринга:

• При просмотре исходного кода (Ctrl+U) страница почти пустая
• Контент появляется с задержкой после загрузки
• URL не меняется при навигации (или используется #)
• В DevTools (вкладка Network) видны XHR/Fetch-запросы к API

Решения

1. Headless-браузер

Запуск полноценного браузера (Chrome, Firefox) в фоновом режиме. Браузер выполняет JavaScript и рендерит страницу — вы получаете финальный HTML.

Playwright — рекомендуемый инструмент:

• Поддержка Chrome, Firefox, WebKit
• Встроенное ожидание элементов
• API для Python, Node.js, .NET, Java
• Stealth-режим (скрытие автоматизации)

Puppeteer — альтернатива от Google:

• Только Chrome/Chromium
• Node.js API
• Большое сообщество и экосистема

Стратегии ожидания

Ключевой момент: когда считать страницу «загруженной»?

Ожидание сетевой активности. Ждём, пока не прекратятся сетевые запросы. Хорошо для страниц с предсказуемой загрузкой.

Ожидание элемента. Ждём появления конкретного элемента (например, .price или [data-product]). Самый надёжный способ.

Фиксированная задержка. Ждём N секунд. Простейший подход, но ненадёжный — страница может загружаться быстрее или медленнее.

Ожидание JavaScript-условия. Проверяем значение JavaScript-переменной (например, window.dataLoaded === true).

2. Перехват API-запросов

Многие SPA загружают данные через API (REST или GraphQL). Вместо парсинга HTML можно перехватить эти запросы и работать с чистым JSON.

Как найти API:

1. Откройте DevTools → вкладка Network
2. Фильтр по XHR/Fetch
3. Найдите запросы, возвращающие нужные данные
4. Воспроизведите запрос с правильными заголовками и параметрами

Преимущества: быстрее, стабильнее, не нужен браузер.

Недостатки: не все сайты имеют открытый API, заголовки могут содержать токены.

3. API для скрейпинга

Специализированные сервисы (FineData Scraper API) автоматически рендерят JavaScript и возвращают готовые данные. Вам не нужно управлять браузерами и их ресурсами.

Ресурсные требования

Headless-браузер потребляет значительно больше ресурсов:

• RAM: 200-500 МБ на каждую вкладку (vs ~5 МБ для HTTP-запроса)
• CPU: активная нагрузка при рендеринге
• Время: 3-15 секунд на страницу (vs 0.5-2 секунды для HTTP)

Это ограничивает параллельность. На сервере с 8 ГБ RAM можно одновременно открыть 10-15 вкладок. Для масштабных задач нужен кластер.

Оптимизация headless-скрейпинга

Блокировка ненужных ресурсов

Отключите загрузку изображений, шрифтов, CSS, аналитики. Это ускоряет загрузку в 2-3 раза и экономит трафик.

Переиспользование контекста

Не создавайте новый браузер для каждого запроса. Используйте один экземпляр с несколькими вкладками. Это экономит время на запуск.

Пул страниц

Создайте пул из N открытых вкладок. Задачи берут вкладку из пула, выполняют парсинг и возвращают. Это стабилизирует потребление памяти.

Прокси для JavaScript-скрейпинга

Headless-браузер с прокси — самая надёжная комбинация:

• Браузер проходит все JavaScript-проверки
• Резидентный прокси обеспечивает чистый IP
• TLS-отпечаток соответствует реальному Chrome

Настройка: прокси указывается при запуске браузера — все запросы (включая загрузку скриптов, стилей, API-вызовы) идут через него.

Читайте также

• Сравнение Datacenter и Residential прокси
• Стратегии ротации прокси

InfraProxy предоставляет прокси, оптимизированные для headless-браузеров: высокая скорость, стабильные соединения, совместимость с Playwright и Puppeteer. Оставьте заявку.