Рубрики
Без рубрики

Веб-соскоб для веб-разработчиков: краткое резюме

Знание одного подхода к веб-соскоблению может решить вашу проблему в краткосрочной перспективе, но все методы имеют свои сильные стороны и слабые стороны. Быть в курсе этого может сэкономить вам время и помочь вам более эффективно решить задачу. Существуют многочисленные ресурсы, которые покажут вам одну технику

Автор оригинала: Dávid Károlyi.

Знание одного подхода к веб-соскоблению может решить вашу проблему в краткосрочной перспективе, но все методы имеют свои сильные стороны и слабые стороны. Быть в курсе этого может сэкономить вам время и помочь вам более эффективно решить задачу.

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

Каковы ваши варианты программно извлечь данные с веб-страницы?

Каковы плюсы и минусы каждого подхода?

Как использовать облачные сервисы, чтобы увеличить степень автоматизации?

Это руководство предназначено для ответа на эти вопросы.

Я предполагаю, что у вас есть базовое понимание браузеров в целом, Http . Запросы, Дом (Модель объекта документа), HTML , CSS селекторы и Async javascript Отказ

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

Статический контент

HTML источник

Начнем с простейшего подхода.

Если вы планируете соскрести веб-страницу, это первый метод для попытки. Это требует незначительного количества вычислительной мощности и наименьшее время для реализации.

Тем не менее, это работает только, если исходный код HTML содержит данные Вы нацеливаете. Чтобы проверить это в Chrome, щелкните правой кнопкой мыши страницу и выберите Просмотр источника страницы . Теперь вы должны увидеть исходный код HTML.

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

Как только вы найдете данные здесь, напишите CSS Selector Принадлежность к упаковочному элементу, иметь ссылку позже.

Для реализации вы можете отправить запрос HTTP Get на URL страницы и вернут исходный код HTML.

В Узел , вы можете использовать инструмент под названием Ceriojs Чтобы разбирать этот RAW HTML и извлечь данные с помощью селектора. Код выглядит что-то подобное:

const fetch = require('node-fetch');
const cheerio = require('cheerio');

const url = 'https://example.com/';
const selector = '.example';

fetch(url)
  .then(res => res.text())
  .then(html => {
    const $ = cheerio.load(html);
    const data = $(selector);
    console.log(data.text());
  });

Динамическое содержание

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

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

Безголовые браузеры

Это может быть достигнуто с помощью безголового браузера. Браузер без головы – это почти одно и то же, что и нормальный, который вы, вероятно, используете каждый день, но без пользовательского интерфейса. Он работает на заднем плане, и вы можете программно контролировать его вместо того, чтобы нажимать на мышке и набрав клавиатуру.

Популярный выбор для браузера без головы Кукла Отказ Это простой в использовании библиотека узла, которая предоставляет API высокого уровня для управления Chrome в безголовом режиме. Его можно настроить для запуска без головы, который пригодится во время разработки. Следующий код делает то же самое, что и раньше, но он будет работать с динамическими страницами:

const puppeteer = require('puppeteer');

async function getData(url, selector){
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto(url);
  const data = await page.evaluate(selector => {
    return document.querySelector(selector).innerText;
  }, selector);
  await browser.close();
  return data;
}

const url = 'https://example.com';
const selector = '.example';
getData(url,selector)
  .then(result => console.log(result));

Конечно, вы можете сделать больше интересных вещей с uppereer, поэтому стоит проверить Документация Отказ Вот кодовый фрагмент, который навигаций к URL, берет скриншот и сохраняет его:

const puppeteer = require('puppeteer');

async function takeScreenshot(url,path){
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto(url);
  await page.screenshot({path: path});
  await browser.close();
}

const url = 'https://example.com';
const path = 'example.png';
takeScreenshot(url, path);

Как вы можете себе представить, запустите браузер требует гораздо больше вычислительной мощности, чем отправка простого получения запроса и анализа ответа. Поэтому выполнение относительно дорого и медленно. Не только то, что, но в том числе браузер как зависимость делает пакет развертывания массивным.

На обороте этот метод очень гибкий. Вы можете использовать его для навигации по страницам, моделируя щелчки, перемещения мыши и события клавиатуры, заполняя формы, принимающие скриншоты или генерирующие PDFS страниц, выполняющие команды в консоли, выбирая элементы для извлечения своего текста. По сути, все можно сделать, это возможно вручную в браузере.

Строить только домо

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

Есть библиотека узла, называемая Jsdom , который будет анализировать HTML, вы передаете это, так же, как браузер. Однако это не браузер, а Инструмент для построения дома от данного HTML Исходный код , также выполняющий код JavaScript в этом HTML.

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

Цитата из документации:

Это решение показано в примере. Он проверяет каждые 100 мс, если элемент либо появился, либо нагревается (через 2 секунды).

Это также часто бросает неприятные сообщения об ошибках, когда на странице не используется некоторая функция браузера, такая как: « Ошибка: не реализована: Window.Alert …» или «Ошибка: не реализовано: Windows.scrollto …». Эта проблема также может быть решена с некоторыми обходами ( Виртуальные консоли ).

Вообще, это низший уровень API, чем uppereer, поэтому вам нужно самостоятельно реализовать определенные вещи.

Эти вещи делают это маленьким Месмером, чтобы использовать, как вы увидите в примере. Кукла решает все эти вещи для вас за кулисами и делает его чрезвычайно простым в использовании. JSDOM для этой дополнительной работы предложит быстрое и остреемое решение.

Давайте посмотрим тот же пример, что и ранее, но с JSDOD:

const jsdom = require("jsdom");
const { JSDOM } = jsdom;

async function getData(url,selector,timeout) {
  const virtualConsole = new jsdom.VirtualConsole();
  virtualConsole.sendTo(console, { omitJSDOMErrors: true });
  const dom = await JSDOM.fromURL(url, {
    runScripts: "dangerously",
    resources: "usable",
    virtualConsole
  });
  const data = await new Promise((res,rej)=>{
    const started = Date.now();
    const timer = setInterval(() => {
      const element = dom.window.document.querySelector(selector)
      if (element) {
        res(element.textContent);
        clearInterval(timer);
      }
      else if(Date.now()-started > timeout){
        rej("Timed out");
        clearInterval(timer);
      }
    }, 100);
  });
  dom.window.close();
  return data;
}

const url = "https://example.com/";
const selector = ".example";
getData(url,selector,2000).then(result => console.log(result));

Обратный инжиниринг

JSDOD – это быстрое и легкое решение, но можно еще больше упростить вещи.

Нам даже нужно имитировать DOM?

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

Если мы упростить Вещи, данные, которые вы ищете, могут быть:

  • Часть исходного кода HTML (как мы видели в первом абзаце),
  • Часть статического файла, на который ссылается в HTML-документе (например, строка в файле JavaScript),
  • Ответ на запрос на сетевую (например, какой-то код JavaScript отправил запрос AJAX на сервер, который ответил на строку JSON).

Все эти источники данных могут быть доступны с помощью сетевых запросов. С нашей точки зрения, не имеет значения, использует веб-страницу HTTP, WebSockets или любой другой протокол связи, потому что все они воспроизводимы в теории.

Как только вы обнаружите ресурс, вы можете отправить аналогичную сетевую заявку на тот же сервер, что и оригинальная страница. В результате вы получаете ответ, содержащий целевые данные, которые могут быть легко извлечены регулярными выражениями, строковыми методами, JSON.PARSE ITC …

С помощью простых слов вы можете просто взять ресурс, где находится данные, вместо обработки и загрузки всего материала. Таким образом, проблема, показанная в предыдущих примерах, может быть решена с одним HTTP-запросом вместо управления браузером или сложным объектом JavaScript.

Это решение кажется легким в теории, но большую часть времени это может быть Действительно много времени Для выполнения и требует некоторого опыта работы с веб-страницами и серверами.

Возможное место для начала исследования – соблюдать сетевой трафик. Отличный инструмент для этого Вкладка сети в Chrome devtools . Вы увидите все исходящие запросы с ответами (включая статические файлы, запросы AJAX и т. Д.), Итак, вы можете пройти через них и искать данные.

Это может быть еще более вялым, если ответ изменен некоторым кодом перед отображением на экране. В этом случае вы должны найти этот кусок кода и понять, что происходит.

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

Эта диаграмма показывает требуемое время выполнения, а размер пакета по сравнению с JSDOM и CUCPETEER:

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

Облачная интеграция службы

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

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

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

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

Возможный триггер может быть расписанием, сетевым запросом и многочисленными другими событиями. Вы можете сохранить собранные данные в базе данных, напишите ее в Google лист или отправить его в Эл. адрес . Все зависит от вашего творчества.

Популярные облачные провайдеры Amazon Web Services (AWS), Платформа Google Cloud (GCP) и Microsoft Azure И все они имеют функциональную службу:

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

Если вы используете uppeter, Google’s C громкие функции это самое простое решение. Размер пакета без головы без головы (~ 130 МБ) превышает предел AWS Lambda, максимальный размер на молнии (50 МБ). Есть некоторые методы, чтобы сделать его работать с лямбдами, но функциями GCP поддержка без головы Chrome по умолчанию Вам просто нужно включить куколь в качестве зависимости в Package.json Отказ

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

Резюме

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

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

Оригинал: “https://www.freecodecamp.org/news/web-scraping-for-web-developers-a-concise-summary-3af3d0ca4069/”

Читайте ещё по теме: