Обробка пошукачем сторінок на JS рендерингу

З незмінною популярністю технології AJAX та поява таких односторінкових програмних фреймворків як AngularJS, відтепер популярність JS рендеринга сторінок зростає все більше і більше. Для пошукових роботів, ця сторінка більше проблемна: якщо просто витягти вміст HTML, тоді часто не можуть отримати достовірну інформацію. Так як же мати справу з цієї сторінкою?

В цілому існує два підходи:

  1. На етапі повзання, пошукач запускає ядро браузера та рендерить (прорисуовуеє) сторінки з викорисанням JS, а потім починає по ній повзати. Цей аспект відповідних інструментів Selenium, HtmlUnit або PhantomJs. Хоча ці інструменти ефективні, але в той же час ще не такі стабільні. Перевага полягає в написанні правил, як і статичній сторінці.
  2. При JS рендерингі сторінки данні приходять вкінці і в основному отримуються через AJAX. Тому аналіз AJAX запиту дасть відповідні дані, що є більш доцільним підходом. А по відношенню до стилю сторінки, то малоймовірно що інтерфейс зміниться. Недоліком є відносно складний процес, щоб знайти запит і змоделювати, котре вимагає великої кількості аналітичного досвіду.

На мій погляд, при порівнянні двох способів для разових або дрібносерійних налаштуваннях пошукача у першиму підході економить час і зусилля. Але для довгострокового, великомасштабного проекту другий варіант буде ідеальним. Для деяких сайтів чи навіть деяких JS технологій пошукач може бути заплутаним, і вцьому випадку - перший спосіб в основному є панацеєю, в той час як другий буде дуже складним.

Для першого способу - webmagic-selenium що визначається як Downloader для завантаження сторінки, тобто рендерить ядром браузера. Конфігурація Selenium-а є відносно складною, але з версією платформи і не надто стабільний рішення. Детальніше дивіться цей блог: використання Selenium для завантаження динамічних сторінок та їх обробки пошукачем

Другий спосіб, і я сподіваюся, що врешті-решт ви подалаєте: розбір оригінальної сторінки JS рендеринга, що це не так складно. Сайт китайською про AngularJS http://angularjs.cn/ в якості прикладу.

1 Як визначити JS рендеринга

Визначити сторінку з JS рендерингом відносно простим спосібом: в браузері переглянути безпосередньо сирцевий код(під Windows Ctrl + U, під Mac командою + Alt + U). Якщо ефективної інформації немає - майже напевно Js рендеринг.

angular-view

angular-source

У цьому прикладі заголовок сторінки “有孚计算机网络-前端攻城师” (змінна комп'ютерна мережа - front-end відділ) не можна знайдений в вихідному коді, тому робимо висновок - використовується JS рендеринг, і ці дані отримані по AJAX.

2 Аналіз request запросів

Тут ми входимо в найважчу частину: пошук запиту даних. В цьому нам допоможуть інструменти розробка для перегляду запитів веб-браузера.

На прикладі Chome ми відкриваємо "Developer Tools" (під Windows, це F12, під Mac це command + Alt + I), потім оновіть сторінку (там можуть бути випадаюче метю або сторінки, та т.п., може ініціювати нові операції запросу даних), і не забудьте зберегти цей запрос, він використовується для запиту - тому аналізуйте його!

Цей крок вимагає трохи терпіння, але це не з нізвідки. По-перше, що допоможе нам - зверху меню Сортування Sort (All, Document ()Всі, документувати) і інші варіанти). Якщо це звичайний AJAX, з'являються під етикетою XHR, запит JSONP під Scripts етикетки, це є два найбільш поширених типа даних.

Після цього ви можете подивитися на дані для визначення розміру, результати, як правило, - інтерфейс через якмй проходить повернення даних. Зрештою в основному покладаються на досвід, ось наприклад "latest? P = 1 & s = 20" виглядає дуже підозріло ...

angular-ajax-list

Для отримання підозрілого адреси, на цей раз можна подивитися на те, що є тілом відповіді. Доки не ясно, інструментами розробника дивимося URL http://angularjs.cn/api/article/latest?p=1&s=20 та копіюється в адресний рядок, запит ще раз (якщо для Chrome - то рекомендуємо встановити додаток jsonviewer, з ним легко побачити AJAX результати ). Дивіться результати, здається, що ми хочемо знайти.

json

Таким же чином, ми входимо в сторінку детальних записів, та легко знайти конкретний зміст запиту request http://angularjs.cn/api/article/A0y2.

3 Програмування

Нагадаємо, що попередньо маємо списк цільових сторінок + приклади. Знаходемо цей запит аналогічно попередньому, але замінюється списком способів -AJAX у режимі AJAX. Данні режим AJAX повертаються в форматі JSON. Ну, ми все ще можемо використовувати спосіб як і минулого разу - обробляти як дві частини сторінки:

  1. Список данних

    В цьому списку на сторінці, ми повинні знайти потрібну інформацію, щоб допомогти нам побудувати таргетований AJAX URL. Бачимо, що повинні надати _id для повідомлення ID постів, та послати деталі request запиту на кілька фіксованих URL з прікріпленим ID компонентів. Таким чином, на цьому етапі, ми повинні вручну побудувати URL, і додати в чергу для сканування. Тут ми використовуємо мову JsonPath для вибору параметрів збору даних (розширений пакет webmagic-extension, який забезпечує підтримку JsonPathSelector).

     if (page.getUrl().regex(LIST_URL).match()) {
     //Here we use language JSONPATH this option to select the data
     List<String> ids = new JsonPathSelector("$.data[*]._id").selectList(page.getRawText());
     if (CollectionUtils.isNotEmpty(ids)) {
         for (String id : ids) {
             page.addTargetRequest("http://angularjs.cn/api/article/"+id);
         }
     }
 }

  2. Об'єкти даний

    При наявності URL-ів насправді зібрати цільові дані дуже просто, так як дані в форматі JSON повністю структурований. Так що відпадає необхідність написати процес аналізу XPath в нашій сторінки. Тут ми всюди використовуємо JsonPath, щоб отримати заголовок title і зміст content.

     page.putField("title", new JsonPathSelector("$.data.title").select(page.getRawText()));
 page.putField("content", new JsonPathSelector("$.data.content").select(page.getRawText()));

Переглянути повний код приклади AngularJSProcessor.java

4 Висновки

У цьому прикладі ми проаналізували процесі сканування класичних динамічних сторінок. Насправді, при обробці пошукачем динамічних сторінок найбільша різниця: це більш складний пошук посилання. Ми порівняли дві моделі пошуку:

  1. Відображається кінцевий сторінці

    Завантажити допоміжну сторінку => знайти посилання => скачати і аналізувати цільові HTML

  2. front-end рендеринг сторінки

    Знайти допоміжні дані => побудови посилання => скачати і проаналізувати цільовий AJAX

Для різних сайтів, допоміжні дані можуть були раніше основної HTML сторінки, це можливо коли request запроси йдуть через AJAX. Можливо, навіть обробляти множинний multiple request запит даних, але основна картина незмінна.

Проте, аналіз цих requests запитів даних, це все ще залишаеться набагато складніше, ніж аналіз сторінок. Так що це насправді важко витягати дані з динамічних сторінок.

Приклад в цьому розділі при аналізі запиту, із наданого зразку для переходу написана послідовніть для пошукача знайти вторинні дані => побудови посилання => завантаження та аналіз цільовим AJAX.

PS:

Для WebMagic з 0.5.0 буде додана підтримка послыдовності Json API, пізніше ви можете використовувати:

page.getJson().jsonPath("$.name").get();

Таким чином вибираються request AJAX запити.

Також підтримується:

page.getJson().removePadding("callback").jsonPath("$.name").get();

Таким чином будуються request JSONP запити

results matching ""

    No results matching ""