Wie sich Javascript auf Webdesign und Web Scraping auswirkt

Gabriel Cioci am 27. August 2021

Erinnern Sie sich noch an die Wildwest-Phase des Internets, als jeder Website-Designer sein eigenes Ding machte und die Seiten mit unpassenden Farben, seltsamen UI-Entscheidungen und überlangen Bildern gefüllt waren? Was für eine Zeit, in der man lebte.

Denken Sie auch daran, wie diese Websites aussahen, wenn Sie sie von einem Telefon oder Tablet aus aufgerufen haben. Die Navigation war nicht nur mühsam, sie war geradezu schmerzhaft.

Alles ist jetzt viel schlanker, in guten UI-Praktiken verankert und für alle Arten von Bildschirmgrößen optimiert. Den letzten Teil haben wir Javascript zu verdanken. Es ist die magische Sprache, die langweilige statische Seiten in schnelle, dynamische Erlebnisse verwandelt.

Kurz gesagt, JS eignet sich hervorragend, wenn Sie eine Website für Menschen optimieren wollen. Bots hingegen kommen damit nicht so gut zurecht. Tatsächlich können einfache Web-Scraper ohne zusätzliche Funktionen kein HTML aus dynamischen Websites extrahieren. Aber keine Sorge, in diesem Artikel erfahren Sie, warum das so ist und wie Sie das Problem lösen können.

Eine Website braucht kein Javascript. Man kann sich mit HTML und CSS begnügen (oder sogar nur mit HTML, wenn man den 80er-Jahre-Look will). Warum also machen die Leute den zusätzlichen Schritt, JS hinzuzufügen? Nun, das werden Sie gleich herausfinden.

Warum verwenden Websites Javascript?

Websites brauchen, ähnlich wie Häuser, ein solides Fundament. Der Grundstein für dieses Fundament ist der HTML-Code. Durch Hinzufügen einiger Tags und Elemente können Sie HTML verwenden, um Abschnitte, Überschriften, Links usw. aufzubauen und anzuordnen.

Es gibt nur wenige Dinge, die Sie mit HTML-Code nicht tun können, wenn Sie eine Website erstellen. Die Anatomie eines HTML-Elements besteht aus einem öffnenden Tag, einem schließenden Tag und dem Inhalt dazwischen. Die Website zeigt die Informationen zwischen diesen beiden Tags in dem Format an, das sie vorgeben.

Wenn Sie diesen einfachen Codierungsstil erlernen, können Sie Ihrer Website Überschriften, Links, Bilder und vieles mehr hinzufügen. Später können Sie mit CSS festlegen, welche Stile für die einzelnen Elemente gelten sollen.

CSS, die Abkürzung für Cascading Style Sheets, ist das i-Tüpfelchen für Ihr HTML. Wenn HTML Ihre Struktur ist, ist CSS die Dekoration. Es ermöglicht Ihnen, Farben, Schriftarten und Seitenlayouts auf der gesamten Seite zu ändern.

An diesem Punkt ist die Website einsatzbereit, wenn auch etwas flach. Sie kann auch unter langen Ladezeiten leiden, wenn Sie zu viele Daten auf zu wenigen Seiten unterbringen, oder sie kann mühsam zu navigieren sein, wenn Sie den Inhalt auf zu viele Seiten verteilen.

Es ist also an der Zeit, das Erlebnis zu verbessern. Javascript ist wie die Haustechnik: Es ist nicht entscheidend für die Struktur, aber es macht einen großen Unterschied für alle, die dort leben.

JavaScript wird hauptsächlich in Webbrowsern und Webanwendungen eingesetzt, ist aber derzeit eine der beliebtesten Sprachen, die in Software, Servern und eingebetteten Hardware-Steuerungen zu finden ist.

Hier sind einige Beispiele für die vielen Möglichkeiten, die sich daraus ergeben:

Audio- und Videoplayer auf einer Website
Animationen
Dropdowns
Ein- und Auszoomen von Fotos
Durch die Bilder auf einer Homepage gleiten
Bestätigungsfelder erstellen

Verschiedene JavaScript-Frameworks wie AngularJS, ReactJS und Node.js sind im Internet verfügbar. Durch den Einsatz dieser Frameworks können Sie den Zeitaufwand für die Erstellung JS-basierter Websites und Anwendungen verringern. JavaScript macht es Entwicklern leicht, Anwendungen in großem Maßstab zu erstellen. Es macht den gesamten Prozess der Erstellung umfangreicher Webanwendungen viel leichter zugänglich.

In letzter Zeit sind viele Websites immer komplexer geworden, und es besteht ein plötzlicher Bedarf an Statefulness, bei der die Daten und Einstellungen des Kunden gespeichert werden.

Was ist Statefulness im Webdesign?

Ein zustandsorientiertes System ist eine dynamische Komponente in dem Sinne, dass es sich wichtige Ereignisse als Zustandsdaten merkt und die Website entsprechend anpasst. Anhand eines Beispiels lässt es sich leichter verstehen:

Bob ruft eine Website auf und meldet sich für ein Konto an. Das System merkt sich seine Anmeldung und merkt sich seinen Status, wenn er das nächste Mal auf die Website zugreift. Auf diese Weise muss Bob nicht auf die Anmeldeseite gehen, da die Website ihn automatisch zum Mitgliederbereich der Website weiterleitet.

Hinter den Kulissen schafft ein Prozess ein Zwischensystem, das sich die Daten des Nutzers merkt und ihn automatisch an den richtigen Server oder die richtige Website weiterleitet.

Ein zustandsloses System hingegen merkt sich nichts und passt sich nicht an, sondern schickt den Benutzer auf die Anmeldeseite und fordert ihn auf, seine Anmeldedaten jedes Mal neu einzugeben.

Dieses Prinzip kann auf jeden Teil des Webdesigns angewendet werden. Was auch immer Sie im Body ändern, der Status wird entsprechend folgen. Er manipuliert eine Vielzahl von Komponenten, die auf der Webseite erscheinen. Statefulness ermöglicht es der Website, benutzerspezifische Informationen zu speichern, um ein personalisiertes Erlebnis zu bieten (Zugriffsrechte), einschließlich historischer Interaktionen und gespeicherter Einstellungen.

Das Webdesign ermöglicht es Ihnen, Informationen über Ihre Nutzer auf einem Server zu speichern, während der Browser die Daten nur bis zum Ende der Sitzung speichern kann.

Wie wirkt sich Javascript auf Web Scraping aus?

Javascript ist eine einfache Programmiersprache, die entwickelt wurde, um Websites innerhalb des Browsers dynamische Funktionen zu verleihen. Wenn eine Webseite geladen wird, wird ihr JS-Code von der Javascript-Engine des Browsers ausgeführt und in maschinenlesbaren Code umgewandelt. Dadurch wird zwar die Ladezeit verkürzt, aber dynamisch veränderte Websites können dem Web-Scraping im Wege stehen.

Einfache Scraper stellen eine HTTP-Anfrage an die Website und speichern den Inhalt in der Antwort. Unter normalen Umständen enthält diese Antwort den HTML-Code der Seite. Dynamische Websites geben jedoch Javascript zurück, das keine wertvollen Daten enthält.

Außerdem können viele Websites erkennen, ob der Besucher Javascript ausführen kann oder nicht. Da normale Benutzer das Internet über einen Browser durchsuchen, können sie kein JS ausführen, was deutlich macht, dass sie keinen Browser verwenden. Von da an ist es für die Websites ziemlich klar, dass ein Bot und kein Mensch die Website besucht. Dies führt in der Regel dazu, dass die IP des Bots blockiert wird.

Kurz gesagt, Websites, die JS verwenden, können ohne die richtigen Tools nicht gescannt werden, und Scraper, die JS nicht ausführen können, sind viel leichter zu fangen als solche, die es können.

Wie gehen Web-Scraper mit Javascript um?

Zum Glück gibt es eine Lösung: Headless-Browser. Diese Programme sind im Wesentlichen dasselbe wie normale Browser, mit denselben Funktionen, aber ohne grafische Benutzeroberfläche. Um mit einem Headless Browser zu navigieren, müssen Sie stattdessen die Befehlszeile verwenden. Sie werden in erster Linie zum Testen von Anwendungen und Websites verwendet, können aber auch Javascript-Code ausführen, was sie zu idealen Zusatzprogrammen für Web-Scraper macht.

Sobald der Headless-Browser den JS-Code verarbeitet, sendet die Website normales HTML, also die Daten, die Sie eigentlich haben wollen.

Ein weiterer Vorteil von Headless Browsern gegenüber anderen ist ihre Geschwindigkeit. Da er sich nicht um die grafische Benutzeroberfläche, das Laden von JS oder CSS kümmern muss, kann er Seiten viel schneller verarbeiten, was für Web Scraping hervorragend ist, da es den Bot nicht zu sehr verlangsamt.

Wenn Sie eine Do-it-yourself-Lösung für die Datenextraktion suchen, gibt es zwei bevorzugte Programmiersprachen: Python und Node.js.

Python und Selenium

Wenn Sie sich für Python entscheiden, ist Selenium die bevorzugte Bibliothek für das JS-Rendering. Sie ist eine zuverlässige Option für die Ausführung von Javascript, die Interaktion mit Schaltflächen, das Scrollen und das Ausfüllen von Online-Formularen. Sie wird hauptsächlich für Open-Source-Projekte in der Browser-Automatisierung verwendet. Das WebDriver-Protokoll steuert Browser wie Chrome und Firefox und kann sowohl aus der Ferne als auch lokal ausgeführt werden.

Ursprünglich als Tool für Cross-Browser-Tests entwickelt, hat sich Selenium schnell zu einer abgerundeten Sammlung von Tools für die Webbrowser-Automatisierung entwickelt. Da viele Websites als Single-Page-Applikationen konstruiert sind, die CAPTCHAs sogar für echte Benutzer spammen, wird das Extrahieren von Daten aufgrund der Hypervigilanz rund um die Bot-Erkennung immer mehr zu einer entmutigenden Aufgabe.

Mit Selenium kann der Bot Javascript-Code lesen und ausführen, so dass Sie Zugriff auf den HTML-Code haben, Formulare ausfüllen, um sich bei Websites anzumelden, auf einer Webseite scrollen und Klicks imitieren.

Aber wenn Sie in Python scannen, sollten Sie nicht bei Selenium stehen bleiben. Sie können die BeautifulSoup-Bibliothek verwenden, die HTML- und XML-Parsing zu einem Kinderspiel macht, und dann Pandas zum Extrahieren und Speichern Ihrer Daten in einer CSV-Datei verwenden.

Node.js und Puppeteer

Puppeteer ist ein Node.js-Paket, mit dem Sie Chrome oder Chromium ohne Kopfhörer betreiben und das DevTools-Protokoll integrieren können. Das Chrome DevTools-Team und eine fantastische Open-Source-Community kümmern sich darum.

Diese Lösung hilft Ihnen bei der Verwaltung eines Web Scrapers im Kontext der sich ständig ändernden Struktur einer Website. Die größte Hürde beim Scrapen besteht darin, dass die Tools ständig aktualisiert werden müssen, um sich anzupassen und nicht von den Servern eingeschränkt zu werden.

Was kann Node.js leisten? Es unterstützt Javascript bei der kostenlosen Ausführung sowohl auf der Client- als auch auf der Serverseite, wobei Netzwerkanwendungen viel schneller erstellt werden können.

Aber konzentrieren wir uns auf den Web Scraping Star. Mit Puppeteer können Sie einen Webbrowser manuell bedienen - vom Ausfüllen von Formularen und Erstellen von Screenshots bis hin zur Automatisierung von UI-Tests.

Wenn Sie noch nie mit diesen Bibliotheken gearbeitet haben oder gerade erst mit dem Web-Scraping beginnen, kann ich verstehen, dass all dies einschüchternd wirken kann. Es gibt jedoch eine noch bequemere Lösung, die Ihnen die ganze Arbeit abnimmt: eine API.

APIs sind auch als Anwendungsprogrammierschnittstelle bekannt und ermöglichen es den Nutzern, die Daten direkt abzurufen. Wenn Sie eine Anfrage an den API-Endpunkt stellen, liefert Ihnen die App die benötigten Daten. Darüber hinaus werden sie automatisch im JSON-Format bereitgestellt.

Der größte Vorteil einer API besteht darin, dass sie sich ganz einfach mit anderen Softwareprodukten oder Skripten verbinden lässt. Mit nur wenigen Codezeilen können Sie die gesammelten Daten direkt in andere Anwendungen einspeisen, nachdem Sie Ihren eindeutigen API-Schlüssel erhalten und die Dokumentation gelesen haben.

Hier ist eine kurze Übersicht über alles, was WebScrapingAPI für Sie tut:

Führt Javascript aus und greift auf den HTML-Code hinter dynamischen Webseiten zu
verwendet einen rotierenden Proxy-Pool mit Hunderttausenden von IPs von Privathaushalten und Rechenzentren, um Ihre Aktivitäten zu maskieren
Bietet Zugriff auf die Anfrage-Header, so dass Sie Ihre API-Aufrufe anpassen und sicherstellen können, dass der Scraper von normalen Besuchern nicht zu unterscheiden ist
Einsatz von Anti-Fingerprinting- und Anti-Captcha-Funktionen
Gibt die bereits in eine JSON-Datei geparsten Daten zurück.

Eine mühelose Lösung für Web Scraping

Von Webdesign, HTML, CSS, Javascript bis hin zu kopflosen Browsern - im World Wide Web schließt sich immer ein Kreis: frei zirkulierende Daten. Das ist der Grund, warum es das Internet überhaupt gibt. Gibt es eine bessere Möglichkeit, die Unmengen von Inhalten zu nutzen, als die Datensammlung? Denn was wären Unternehmen, Entwickler und sogar die Menschen im Allgemeinen heute ohne den Zugang zu wertvollen Informationen?

Es ist wirklich das, was uns alle antreibt. Jetzt, da Sie verstehen, wie Javascript das heutige Internet beeinflusst, sind Sie besser darauf vorbereitet, mit dem Scraping zu beginnen, und ich hoffe, dass Sie genau das tun. Wenn Ihnen die Zeit davonläuft, sollten Sie unsere eigene Lösung, WebScrapingAPI, kostenlos ausprobieren. Die Testphase dauert zwei Wochen, und Sie erhalten Zugang zu allen wichtigen Funktionen wie JS-Rendering und Residential Proxies.

Sehen Sie sich an, was die API leisten kann, und wenn Sie noch nicht überzeugt sind, wenden Sie sich an unseren unglaublich reaktionsschnellen Kundensupport.