Что такое динамическая страница?

Привет! Динамические веб-страницы на первый взгляд могут показаться запутанными. Меня зовут [Джон], и я работаю с веб-скраперами более 5 лет, поэтому я здесь, чтобы подробно рассказать, что такое динамические страницы.

Независимо от того, новичок ли вы в парсинге веб-страниц или опытный профессионал, понимание того, что делает страницу «динамической», является ключом к эффективному парсингу. К концу этого руководства вы узнаете, как идентифицировать динамические страницы, почему они важны для парсинга веб-страниц и как подходить к их парсингу.

Статические и динамические страницы

Чтобы понять, что такое динамическая страница, полезно сначала взглянуть на ее противоположность — статическую страницу.

A статическая веб-страница имеет предопределенное содержимое, которое не меняется после начальной загрузки страницы. Все HTML, CSS, JavaScript, изображения и другие ресурсы загружаются с сервера при первом отображении страницы.

Согласно документации Google Web Fundamentals, статические страницы обладают двумя ключевыми качествами:

• Они отображают один и тот же контент для всех пользователей.
• Содержимое не меняется в зависимости от взаимодействия с пользователем.

Несколько примеров статических страниц:

• Простые HTML-сайты без особой интерактивности.
• Информационные сайты старой школы, такие как Википедия
• Классические блоги и веб-сайты

A динамическая веб-страница, с другой стороны, обновляет свое содержимое после первоначальной загрузки без необходимости полного обновления страницы. Это достигается путем выполнения дополнительных запросов (обычно запросов XHR или Fetch с использованием JavaScript) для получения дополнительных данных из серверной части по требованию.

Эти новые данные затем можно использовать для изменения DOM и обновления того, что вы видите на странице.

Согласно веб-документации MDN, некоторые признаки динамической страницы:

• Содержимое страницы меняется без перезагрузки страницы.
• Элементы DOM добавляются, удаляются или манипулируются ими.
• Дополнительные данные загружаются и обрабатываются

Распространенные примеры динамических страниц:

• Современные интерактивные веб-приложения, такие как Twitter, Facebook и т. д.
• Сайты с бесконечной прокруткой каналов, такие как Instagram, Reddit, Pinterest.
• Списки товаров электронной торговли с отложенной загрузкой товаров
• Страницы, созданные с использованием таких фреймворков JavaScript, как React, Vue, Angular.

Таким образом, динамическая страница может обновлять свой контент и DOM после первоначальной загрузки, делая дополнительные запросы на получение данных из бэкэнда. Практически любое современное веб-приложение будет иметь некоторый уровень динамической загрузки.

Идентификация динамических страниц

Теперь, когда вы концептуально понимаете разницу между статическими и динамическими страницами, давайте рассмотрим некоторые явные признаки того, что страница является динамической:

1. Построен на основе JavaScript.

Если сайт создан с использованием React, Vue, Angular, Svelte или любой другой среды JavaScript, скорее всего, это динамическая страница.

Эта Опрос 2021 года от State of JS показал популярность фронтенд-фреймворков:

Вы можете определить, использует ли сайт React, установив Инструменты разработчика React расширение браузера, которое будет выделять компоненты React на странице.

2. Ленивая загрузка контента

Если страница загружает такие ресурсы, как изображения, видео или такие элементы, как публикации и комментарии, только при их прокрутке в поле зрения — это форма динамической загрузки.

Содержимое извлекается из серверной части только при необходимости, когда пользователь просматривает эту часть страницы. Отложенная загрузка повышает производительность.

3. Новые запросы сети на взаимодействие

Откройте вкладку «Сеть» в инструментах разработчика Chrome. Перезагрузите страницу и посмотрите запросы — если при прокрутке, нажатии кнопок, наведении курсора на элементы и т. д. выполняются дополнительные запросы XHR или Fetch, то, скорее всего, загружается динамический контент.

Например, вот новые запросы при прокрутке в Твиттере:

Twitter network requests demo

Каждый дополнительный запрос возвращает больше твитов для отображения на странице.

4. Обновление элементов DOM

Проверяйте элементы на странице до и после взаимодействия с ней. Если DOM вообще меняется — добавляются новые элементы, меняются атрибуты элементов, удаляются узлы — это указывает на динамические модификации.

Например, вот обновление DOM Twitter, когда я просматриваю ленту:

Twitter DOM changes demo

Новые твиты динамически вводятся в DOM по мере их получения из серверной части.

5. Отключение JavaScript

Простой способ проверить, использует ли страница JavaScript для динамической загрузки, — это временно отключить JS в вашем браузере (используя расширение, например Быстрый переключатель JavaScript) и перезагрузите.

Если содержимое страницы значительно меняется при отключенном JavaScript, это означает, что для динамической загрузки контента используется JS.

Примеры динамических страниц

Давайте рассмотрим несколько реальных примеров, чтобы сделать идентификацию динамических страниц более конкретной.

Twitter

Ранее в статье мы уже использовали Twitter в качестве примера. Это типичное динамическое веб-приложение с бесконечной прокруткой, отложенной загрузкой контента и обновлениями DOM.

Некоторые явные признаки того, что Twitter динамичен:

• Создано с помощью React
• Ленивая загрузка изображений/видео
• Новые сетевые запросы при прокрутке
• DOM обновляется новыми твитами

Вот видеообзор, демонстрирующий динамическое поведение:

Twitter Dynamic Page Loading Demo

что его цель

Facebook — еще один яркий пример динамического веб-приложения:

• Бесконечная прокрутка каналов
• Ленивая загрузка изображений/видео
• Дополнительные сетевые запросы при прокрутке
• DOM обновляется новыми сообщениями

Вот видео, показывающее динамическую загрузку на Facebook:

Facebook Dynamic Loading Demo

Reddit.

Reddit — чрезвычайно динамичный сайт, один из пионеров бесконечной прокрутки каналов. Некоторые признаки того, что Reddit динамичен:

• Создано с помощью React
• Постоянно загружает новые сообщения при прокрутке
• Отложенная загрузка изображений
• Тонны новых сетевых запросов при прокрутке

Вы можете сами увидеть динамическую загрузку, открыв Reddit в браузере.

Amazon

Даже списки продуктов Amazon имеют динамическое поведение загрузки:

• Дополнительные товары загружаются при прокрутке
• Сетевые запросы извлекают новые продукты
• DOM обновляется новым HTML

Вот пример — обратите внимание, как полоса прокрутки снова поднимается вверх при загрузке новых продуктов:

Amazon Dynamic Product Loading

Это повышает производительность за счет загрузки продуктов только по мере их просмотра.

Medium

Платформы для ведения блогов, такие как Medium, имеют динамическую загрузку, поэтому статьи загружаются быстрее:

• Изображения загружаются отложенно при прокрутке
• Основной текст загружается частями.
• Дополнительные сетевые запросы извлекают больше текста

Такое поведение можно наблюдать в любой статье на Medium.

Pinterest

Pinterest, конечно, полон динамической загрузки с бесконечной прокруткой:

• Закрепляет отложенную загрузку при прокрутке
• Новые сетевые запросы получают больше контактов
• DOM обновляется новыми выводами

Поведение очень похоже на поведение других социальных сетей.

Почему это важно для парсинга веб-страниц

Теперь, когда вы знаете, как распознавать динамические веб-страницы, давайте обсудим, почему это важно при парсинге.

Понимание того, является ли страница статической или динамической, влияет на инструменты и методы требуется для создания эффективного скребка.

Парсинг статических страниц

Для статических веб-страниц мы можем просто:

1. Сделайте один HTTP-запрос, чтобы получить полный HTML-код.
2. Анализируйте HTML-контент на выбранном нами языке программирования.
3. Извлеките любые данные, которые нам нужны, с помощью библиотеки синтаксического анализа, такой как Beautiful Soup в Python или Cheerio в Node.js.

Например, вот простой парсер Python, использующий Requests и Beautiful Soup для парсинга статической страницы Википедии:

import requests
from bs4 import BeautifulSoup

url = ‘https://en.wikipedia.org/wiki/Hippopotamus‘ 

response = requests.get(url)
soup = BeautifulSoup(response.text, ‘html.parser‘)

title = soup.find(‘h1‘).text
infobox = soup.find(‘table‘, class_=‘infobox‘)

print(title)
print(infobox)

Поскольку Википедия обслуживает весь контент, включая текст, изображения, таблицы и т. д., в исходном HTML-коде, мы можем проанализировать все содержимое страницы с помощью простого скрипта.

Нет необходимости в безголовом браузере или симуляции взаимодействия с пользователем.. Статический HTML содержит все необходимые нам данные.

Этот простой подход к парсингу хорошо работает для многих статических сайтов и страниц.

Парсинг динамических страниц

Парсинг динамических страниц требует другого подхода, потому что:

• Исходный HTML не содержит всего контента – больше загружается динамически
• Нам надо имитировать взаимодействие с пользователем например, прокрутка для запуска загрузки контента
• Выполнение JavaScript требуется для обработки динамических запросов.

Это означает, что мы должны использовать безголовый браузер например «Кукловод», «Драматург» или «Селен», чтобы:

1. Загрузите полный JavaScript + CSS, чтобы правильно отобразить начальную страницу.
2. Прокрутите, щелкните, наведите указатель мыши и т. д., чтобы вызвать динамическую загрузку контента.
3. Дождитесь завершения сетевых запросов и обновления страницы.
4. Извлеките обновленный HTML-код, содержащий динамически загружаемый контент.

Например, вот как очистить каналы Twitter с бесконечной прокруткой с помощью Python + Playwright:

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch()
    page = browser.new_page()  
    page.goto(‘https://twitter.com/home‘)

    page.scroll_to_bottom() # trigger dynamic loading
    page.wait_for_load_state(‘networkidle‘) 

    html = page.content() # get full html
    # parse html to extract tweets... 

   browser.close()

Ключевые отличия от статического парсинга:

• Запуск полноценного браузера Chrome
• Выполнение команд прокрутки для запуска загрузки контента
• Ожидание простоя сети и обновления DOM
• Получение обновленного HTML после завершения динамической загрузки

Эта автоматизация браузера необходима для полной визуализации динамических страниц перед очисткой..

Статический и динамический парсинг

Вот сравнение статического и динамического парсинга страниц:

Понимание этих ключевых различий поможет вам выбрать правильный подход для каждого проекта парсинга.

Инструменты для парсинга динамических страниц

Теперь давайте обсудим некоторые из наиболее популярных инструментов для очистки динамических сайтов с большим количеством JavaScript:

кукольник

кукольник — это библиотека Node.js, разработанная Google для управления безголовым Chrome. Это позволяет нам:

• Запустите экземпляр браузера
• Загрузить страницы
• Взаимодействуйте, прокручивая, нажимая и заполняя формы.
• Выполнять JavaScript на страницах
• Доступ к DOM и извлечение HTML

Puppeteer имеет более 67 тысяч звезд на GitHub и является одним из наиболее часто используемых и удобных для новичков вариантов.

Драматург

Драматург это новичок в этом блоке, также предназначенный для управления Chromium, Firefox и WebKit. Ключевая особенность:

• Поддерживает Chrome, Firefox и Safari.
• Быстрее и надежнее, чем Puppeteer
• Простота установки и использования на разных языках
• Мощные встроенные помощники ожидания и утверждения.
• 19 тысяч звезд GitHub

В примерах кода этого руководства мы использовали Playwright из-за его великолепных API.

Селен

Селен существует уже более 15 лет и является наиболее широко используемым пакетом автоматизации браузеров.

Плюсы:

• Поддерживает все основные браузеры
• Очень зрелый и проверенный в боях
• Большое сообщество и экосистема

Недостатки:

• Поддерживает только JavaScript/TypeScript
• API более громоздкий, чем Puppeteer или Playwright.

Selenium незаменим для кросс-браузерного тестирования, но Puppeteer и Playwright часто легче использовать для веб-скрапинга.

Пользовательские скрипты браузера

Вы также можете управлять браузерами напрямую, используя необработанные API-интерфейсы браузера и такие языки, как JavaScript. Это обеспечивает максимальную гибкость, но требует больше усилий, чем использование таких библиотек, как Puppeteer.

Подходит как Хромированный Кукловод и Без хрома появились для упрощения работы напрямую с протоколом Chrome DevTools.

Службы безголового браузера

Услуги, подобные апифай, Diffbotи проксисканирование предоставить облачные автономные решения, которые выполняют динамическое парсинг за вас.

Преимущество заключается в снижении затрат на DevOps и инфраструктуру, поскольку они управляют браузерами и прокси. Но меньше контроля по сравнению с запуском собственных скриптов.

Основные выводы

Давайте подведем итоги того, что мы рассмотрели:

• Динамические страницы обновлять контент после начальной загрузки, получая данные из серверной части

• Статические страницы отображать весь контент в первом ответе HTML

• Идентификация динамических страниц:

  • Построен с использованием фреймворков JavaScript
  • Ленивая загрузка контента
  • Новые сетевые запросы на взаимодействие
  • Обновление элементов DOM
  • Отключение JavaScript меняет страницу

• Парсинг статических страниц прост, но динамические страницы требуют автоматизации браузера.

• Инструменты разработчика Puppeteer, Playwright, Selenium и Chrome обычно используются для очистки динамических сайтов JavaScript.

• Понимание того, является ли страница статической или динамической, определяет лучший подход к парсингу.

Я надеюсь, что это руководство дало вам полное представление о динамических веб-страницах и о том, как они влияют на парсинг веб-страниц. Дайте мне знать, если у вас есть еще вопросы!

Удачного соскабливания!