В этом руководстве вы узнаете:
- Почему вы должны знать разницу между статическим и динамическим контентом
- Что такое статический контент, как его обнаружить, какие инструменты использовать для его соскабливания и с какими трудностями приходится сталкиваться.
- Что такое динамический контент, как его определить, какие инструменты лучше всего подходят для его поиска и с какими препятствиями вы можете столкнуться
- Таблица сравнения статического и динамического контента в контексте веб-скреппинга
Давайте погрузимся!
Введение в статический и динамический контент при веб-скрепинге
Когда речь идет о веб-скреппинге, существует значительная разница в подходах в зависимости от того, статический или динамический контент вы хотите извлечь. Это различие существенно влияет на то, как вы будете разбирать, обрабатывать и извлекать данные.
Как правило, разделы или страницы, оптимизированные для SEO, обычно статичны. Напротив, высокоинтерактивные разделы или разделы, требующие оперативного обновления, обычно являются динамическими. Однако в большинстве случаев реальность оказывается сложнее.
Современные веб-страницы часто представляют собой гибриды, то есть содержат как статический, так и динамический контент. Поэтому обозначение всей страницы как “статической” или “динамической” обычно неточно. Точнее будет сказать, что конкретный контент на странице является либо статическим, либо динамическим.
Еще больше усложняет ситуацию то, что даже если одна страница на сайте является статической, другая страница на том же сайте может быть динамической. Как одна веб-страница может содержать оба типа контента, так и веб-сайт может представлять собой набор как статических, так и динамических страниц.
Итак, учитывая все вышесказанное, приготовьтесь к следующему сравнению статического и динамического контента!
Статический контент
Давайте рассмотрим все, что вам нужно знать о статическом контенте на веб-страницах и о том, как его скрапировать.
Что такое статический контент?
Статический контент – это все элементы веб-страницы, которые встраиваются непосредственно в HTML-документ, возвращаемый сервером. Другими словами, он не требует рендеринга на стороне клиента или дополнительного получения данных браузером. Таким образом, все уже присутствует в исходном HTML-ответе.
Обычно это элементы пользовательского интерфейса, текст, изображения и другой контент, который не меняется, если не обновлять исходный код на стороне сервера. Даже если сервер динамически получает данные из баз данных или API перед созданием HTML-документа для отправки клиенту, с точки зрения клиента содержимое все равно считается статичным. Причина в том, что браузеру не требуется дальнейшая обработка.
Как определить, что веб-страница использует статическое содержимое
Как уже говорилось во введении, современные веб-сайты редко бывают на 100% статичными. В конце концов, большинство веб-страниц включают в себя тот или иной уровень интерактивности на стороне клиента. Поэтому главный вопрос заключается не в том, является ли страница полностью статичной или динамичной, а в том, какие части страницы используют статичный контент.
Чтобы определить, является ли содержимое статичным, нужно просмотреть необработанный HTML-документ, возвращаемый сервером. Обратите внимание, что это не то же самое, что вы видите в браузере. В браузере отображается рендеринг DOM, который может быть изменен JavaScript после загрузки страницы.
Есть два простых способа проверить, используется ли на странице статическое содержимое, и определить, какие элементы являются статическими:
- Просмотр исходного текста страницы
- Используйте HTTP-клиент
Чтобы применить первый подход, щелкните правой кнопкой мыши на пустой области страницы и выберите опцию “Просмотреть источник страницы”:
Результатом будет исходный HTML, возвращенный сервером:
Например, в данном случае можно заметить, что элементы кавычек уже присутствуют в этом HTML. Поэтому можно с уверенностью предположить, что они статичны.
Второй подход предполагает выполнение простого GET-запроса к URL страницы с помощью HTTP-клиента:
Здесь снова показан необработанный HTML, возвращенный сервером. Поскольку HTTP-клиенты не могут выполнять JavaScript, вам не нужно беспокоиться об изменениях DOM. Тем не менее, как мы вскоре расскажем, ваш запрос может быть заблокирован сервером из-за защиты от ботов. Поэтому рекомендуется использовать метод “Просмотр источника страницы”.
Инструменты для скрапирования статического содержимого
Скрап статического контента прост, поскольку он встроен непосредственно в HTML-источник страницы. Ниже приведен базовый обзор процесса:
- Получите HTML-документ, выполнив GET-запрос к URL страницы с помощью простого HTTP-клиента.
- Разберите ответ с помощью парсера HTML.
- Извлеките нужные элементы с помощью селекторов CSS, XPath или аналогичных стратегий, предоставляемых парсером HTML.
Если вы ищете инструменты, которые можно использовать для соскабливания контента, ознакомьтесь с нашими подробными руководствами:
Полный пример, связанный с сайтом “Quotes to Scrape”, HTML которого был показан в предыдущем разделе, вы можете найти в нашем руководстве по веб-скреппингу с помощью Python.
Среди популярных стеков для поиска статического контента можно назвать следующие:
- Python: Requests + Beautiful Soup, HTTPX + Beautiful Soup, AIOHTTP + Beautiful Soup
- JavaScript: Axios + Cheerio, Node Fetch + Cheerio, Fetch API + Cheerio
- PHP: cURL + DomCrawler, Guzzle + DomCrawler, cURL + Simple HTML DOM Parser
- C#: HttpClient + HtmlAgilityPack, HttpClient + AngleSharp
“BeautifulSoup работает быстрее и использует меньше памяти, чем Selenium. Он не выполняет JavaScript и не делает ничего, кроме разбора HTML и работы с его DOM”. – Обсуждение на Reddit
Проблемы, возникающие при скрапировании статического содержимого
Основная проблема при соскабливании статического контента заключается в правильном HTTP-запросе для получения HTML-документа. Многие серверы настроены на предоставление контента только реальным браузерам, поэтому они могут заблокировать ваш запрос, если в нем отсутствуют определенные заголовки или не пройдена проверка TLS-отпечатков.
Чтобы избежать этих проблем, вам следует вручную установить правильные HTTP-заголовки для веб-скрапинга. В качестве альтернативы используйте продвинутый HTTP-клиент, который может имитировать поведение браузера, например cURL Impersonate.
В противном случае, если вы хотите получить профессиональное решение, которое не будет зависеть от неудобных трюков или обходных путей в вашем коде, рассмотрите возможность использования Web Unlocker. Это конечная точка, которая возвращает HTML любой веб-страницы, независимо от защитных механизмов, реализованных на сервере.
Кроме того, если вы отправляете слишком много запросов с одного IP-адреса, это может привести к ограничению скорости или даже запрету IP-адреса. Чтобы предотвратить это, подключите вращающиеся прокси-серверы, чтобы распределить запросы по нескольким IP-адресам. См. наше руководство о том, как избежать запрета IP-адресов с помощью прокси-серверов.
Динамический контент
Давайте продолжим это руководство по статическому и динамическому контенту и рассмотрим, как динамический контент загружается или отображается на веб-страницах и как его соскребать.
Что такое динамический контент?
В веб-страницах динамический контент относится к любому содержимому, которое загружается или отображается на стороне клиента – либо во время первоначальной загрузки страницы, либо после взаимодействия с пользователем. Сюда относятся данные, получаемые с помощью таких технологий, как AJAX и WebSockets, а также контент, встроенный в JavaScript и отображаемый во время выполнения в браузере.
В частности, динамическое содержимое не является частью исходного HTML-документа, возвращаемого сервером. Это происходит потому, что он добавляется на страницу после выполнения JavaScript. Это означает, что он не будет виден, пока страница не будет отображена в браузере – единственном инструменте, который может выполнять JavaScript.
Как определить, что веб-страница использует динамическое содержимое
Самый простой способ определить, является ли страница динамической или нет, – это следовать противоположному подходу, используемому для обнаружения статического содержимого. Если HTML-документ, возвращаемый сервером , не содержит содержимого, которое вы видите на странице, значит, существует какой-то механизм, позволяющий получить или отобразить это содержимое динамически на клиенте.
Обратное не всегда работает. Если в HTML, возвращаемом сервером, присутствует некоторое содержимое, это не означает, что страница полностью статична. Это содержимое может быть устаревшим, и клиент может динамически обновлять его либо один раз, либо периодически после загрузки страницы. Это часто происходит, например, на страницах, где отображаются обновления в реальном времени.
Чтобы проверить, содержит ли страница динамическое содержимое, можно перезагрузить страницу или повторить действие пользователя, которое вызывает появление содержимого, проверив раздел “Сеть” в DevTools браузера:
Например, на приведенной выше веб-странице видно, что данные электронной коммерции извлекаются динамически на клиенте через вызов API, выполняемый через AJAX.
Еще одним возможным источником динамического контента являются веб-приложения, построенные как SPA(Single-Page Applications). В них используются фронтенд-технологии вроде React, которые в значительной степени зависят от рендеринга JavaScript. Таким образом, если DOM, который вы видите в DevTools, сильно отличается от HTML, возвращаемого сервером, значит, страница динамическая.
Инструменты для скрапирования динамического контента
Для отображения или получения динамического содержимого требуется выполнение JavaScript. Поскольку только браузеры могут выполнять JavaScript, ваши возможности по извлечению динамического содержимого обычно ограничены инструментами автоматизации браузера, такими как Playwright, Selenium и Puppeteer.
Эти инструменты предоставляют API, позволяющие программно управлять реальным браузером. Таким образом, веб-скраппинг динамического контента требует выполнения этих трех шагов:
- Дайте браузеру команду перейти на целевую страницу.
- Дождитесь появления на странице определенного динамического содержимого.
- Выберите и извлеките это содержимое с помощью предоставляемых API для выбора узлов и извлечения данных.
Для получения более подробной информации прочитайте нашу статью о том , как скрести динамические веб-сайты в Python.
Проблемы, возникающие при скрапировании динамического контента
Скраппинг динамического контента по своей сути гораздо сложнее, чем скраппинг статического контента. Во-первых, потому что вам может потребоваться имитировать взаимодействие с пользователем в коде, чтобы воспроизвести все действия, необходимые для доступа к контенту. Это может стать проблемой при работе с сайтами, имеющими сложную навигацию.
Во-вторых, потому что на динамических веб-страницах часто применяются продвинутые меры по борьбе со скаппингом и ботами, такие как CAPTCHA, JavaScript-задачи, отпечатки пальцев браузера и многое другое.
Также не забывайте, что инструменты автоматизации браузеров должны использовать браузер для управления им. Этих изменений в настройках браузера может быть достаточно, чтобы продвинутые системы защиты от ботов определили вас как бота. Это особенно актуально при управлении браузером в режиме headless для экономии ресурсов.
Обходным путем для решения этих проблем является использование библиотек автоматизации браузера со встроенными функциями защиты от ботов, таких как SeleniumBase, Undetected ChromeDriver, Playwright Stealth или Puppeteer Stealth.
Однако эти решения затрагивают лишь верхушку айсберга и подвержены всем тем проблемам, которые возникают при статическом скрапинге контента, – запретам на использование IP-адресов, проблемам с репутацией IP-адресов и т. д. Вот почему наиболее эффективным подходом является использование такого решения, как Bright Data’s Scraping Browser, которое:
- Интегрируется с Puppeteer, Playwright, Selenium и любым другим инструментом автоматизации браузера.
- Работает в облаке и бесконечно масштабируется
- Работает с прокси-сетью, насчитывающей более 150 миллионов IP-адресов.
- Работает в режиме headful, чтобы избежать обнаружения без головы
- Поставляется со встроенными возможностями решения CAPTCHA
- Имеет первоклассные функции обхода ботов
Статический и динамический контент для веб-скрапинга: Сравнительная таблица
Это сводная таблица, в которой сравнивается статический и динамический контент для веб-скрапинга:
| Аспект | Статический контент | Динамический контент |
|---|---|---|
| Определение | Содержимое, встроенное непосредственно в первоначальный HTML-ответ сервера | Содержимое, загруженное или отображенное с помощью JavaScript после загрузки страницы |
| Видимость в HTML | Видимый в необработанном HTML-документе, возвращаемом сервером | Не отображается в исходном HTML-документе |
| Место рендеринга | Рендеринг на стороне сервера | Рендеринг на стороне клиента |
| Методы обнаружения | – Опция “Просмотр источника страницы” – Просмотр HTML в HTTP-клиенте |
– Проверьте различия между исходным HTML и отображаемым DOM – Осмотрите вкладку “Сеть” в DevTools |
| Общие случаи использования | – SEO-ориентированный контент – Простые информационные списки |
– Обновления в режиме реального времени – Приборные панели для конкретного пользователя – Содержание SPA |
| Трудности при соскабливании | Легко | От среднего до тяжелого |
| Подход, основанный на скрапинге | HTTP-клиент + парсер HTML | Средства автоматизации работы браузера |
| Производительность | Быстро, так как не требуется рендеринг JS | Медленный, так как предполагает рендеринг страниц в браузере и ожидание загрузки элементов |
| Основные проблемы, связанные со скрапбукингом | – Отпечатки пальцев TLS – Ограничение скорости – IP-запреты |
– Каптчи – Сложные потоки навигации/взаимодействия – Задачи JS |
| Рекомендуемые инструменты для предотвращения блокировки | Прокси, Web Unlocker | Браузер для скрапинга |
| Пример стека | Запросы + Красивый суп | Playwright, Selenium или Puppeteer |
Список инструментов для скраппинга на конкретных языках программирования, охватывающих оба сценария, можно найти в руководствах ниже:
- Лучшие библиотеки для веб-скреппинга на JavaScript
- Лучшие библиотеки для веб-скреппинга на Python
- 7 лучших библиотек для веб-скреппинга на PHP
- 7 лучших библиотек для веб-скреппинга на C#
Заключение
В этой статье вы разобрались в различиях между статическим и динамическим контентом на веб-страницах с акцентом на веб-скрептинге. Вы узнали, что представляют собой эти два типа контента, чем они отличаются и как обрабатывать оба типа при разборе веб-данных.
Независимо от того, имеете ли вы дело со статическим или динамическим контентом, все может усложниться из-за мер по борьбе со скрапингом и ботами. Именно здесь на помощь приходит Bright Data, предлагающая полный набор инструментов для решения всех ваших задач по скрапингу:
- Прокси-сервисы: Несколько типов прокси-серверов для обхода гео-ограничений, с 150M+ IP-адресами[1].
- Браузер для скрапинга: Браузер, совместимый с Playright, Selenium и Puppeter, со встроенными возможностями разблокировки.
- API для веб-скреперов: Предварительно настроенные API для извлечения структурированных данных из 100+ основных доменов.
- Web Unlocker: Универсальный API, позволяющий разблокировать сайты с защитой от ботов.
- SERP API: Специализированный API, который открывает доступ к результатам поисковых систем и извлекает полные данные SERP из всех основных поисковых систем[2].
Создайте учетную запись Bright Data и протестируйте наши продукты для скрапбукинга с помощью бесплатной пробной версии!
Кредитная карта не требуется
