Lightpanda: Der 64-MB-Browser, der 60-mal SCHNELLER ist als Chrome
BBetter Stack
컴퓨터/소프트웨어창업/스타트업AI/미래기술
Transcript
00:00:00Das ist LightPanda, ein Headless-Browser, der von Grund auf in Zig für KI-Agenten entwickelt wurde. Er nutzt weder WebKit noch Chromium, was ihn bis zu neunmal schneller macht und 16-mal weniger Arbeitsspeicher verbraucht als Headless Chrome.
00:00:12Er bietet sogar das Chrome Developer Protocol, sodass er mit Puppeteer oder Playwright verwendet werden kann, rendert jedoch keine Pixel und unterstützt keine gängigen Web-APIs wie Service Worker, IndexedDB oder CORS.
00:00:22Warum wird er also in OpenClaw und dem Cells-Agent-Browser verwendet? Abonniert den Kanal und lasst es uns herausfinden.
00:00:30LightPanda wurde um 2024 von Pierre, Francis und Kate veröffentlicht, lange bevor es Claude Code überhaupt gab und etwa zu der Zeit, als ChatGPT populär wurde.
00:00:41Es begann als Web-Scraping- und Automatisierungstool, aber kurz nachdem KI-Agenten an Popularität gewannen, konzentrierten sie sich darauf und konnten sich eine Finanzierungsrunde sichern.
00:00:51Aber war das nur ein schnelles Rebranding aufgrund des KI-Booms oder taugt es tatsächlich für Agenten?
00:00:56Wir werden das testen, indem wir unseren eigenen Agenten mit dem Claude SDK und einem benutzerdefinierten WebFetch-Tool bauen. Wir verwenden Chrome und LightPanda als Web-Browsing-Engines und vergleichen die Unterschiede, um zu sehen, welcher besser ist und warum.
00:01:09Obwohl LightPanda einen MCP-Server und einen eigenen Cloud-Dienst hat, versuchen wir, die Dinge so lokal wie möglich zu halten.
00:01:16Und wir gehen zuerst ein grundlegendes Beispiel für die Verwendung von LightPanda durch, bevor wir uns an die Erstellung des WebFetch-Tools machen.
00:01:22Hier ist ein Skript, das im Grunde eine Reihe von Links von Wikipedia abruft.
00:01:27Das funktioniert so: Zuerst wird ein LightPanda-Server erstellt, dann verbindet man sich mit Puppeteer mit diesem Server.
00:01:32Wir haben hier etwas Code, um zu messen, wie lange der Vorgang dauert. Er geht zu Wikipedia, durchläuft alle Links im Referenzbereich und gibt sie aus.
00:01:40Wenn ihr euch das vorstellen wollt: Der Referenzbereich befindet sich hier unten auf der Browser-Seite.
00:01:44Wie ihr sehen könnt, ist der erste Referenzlink dieser "Device Atlas"-Link, der mit dem hier unten übereinstimmt.
00:01:50LightPanda hat also alle Links in 344 Millisekunden gefunden.
00:01:53Und wenn wir das Gleiche mit Chrome versuchen, dauert es 392 Millisekunden.
00:01:58Es gibt also keinen großen Unterschied, aber das ändert sich drastisch, wenn man mehrere Seiten scpen möchte.
00:02:04Hier ist ein ähnliches Skript mit einem großen Unterschied.
00:02:07Anstatt Links von einer einzigen Wikipedia-Seite zu holen, bearbeiten wir 100.
00:02:11Wenn wir uns die Definition ansehen, sehen wir alle Seiten, die vom Webbrowser abgerufen werden: HTTPS, JavaScript, Mongo, Python und so vieles mehr.
00:02:19Versuchen wir das mit LightPanda: Die ganze Sache ist in 18 Sekunden erledigt.
00:02:23Wenn wir das Gleiche für Chrome versuchen, dauert es etwa 30 Sekunden.
00:02:26Und in einigen Fällen, als ich das laufen ließ, dauerte es 60 Sekunden.
00:02:29Aber sehen wir uns an, wie sich die Performance unterscheidet, wenn es über einen Agenten läuft.
00:02:32Hier habe ich einen sehr einfachen Agenten, der das Claude SDK verwendet, und ein WebFetch-Tool hier, das diesen Prompt ausführt.
00:02:39Er fasst den Unterschied zwischen Array.map, Filter und Reduce in JavaScript zusammen und besucht diese spezifischen Links auf MDN, um Informationen darüber zu finden.
00:02:48Darunter haben wir unsere Agenten-Schleife. Da es nur ein Tool gibt, gibt es eine if-Anweisung, um zu prüfen, ob dieses spezifische Tool verwendet wird.
00:02:54Hätten wir mehr Tools, wäre das auch der Fall.
00:02:56Und hier wird die WebFetch-Funktion verwendet, wann immer ein Tool-Aufruf stattfindet.
00:03:00Darunter haben wir einige Metriken und eine Funktion zur Berechnung des Browser-Speichers.
00:03:04Dieses Projekt verwendet LightPanda und Chrome über das Chrome DevTools Protocol.
00:03:09Wir lassen es also auf einem Port laufen und Puppeteer verbindet sich mit diesem Port, bevor der Agent ausgeführt wird.
00:03:14Wir können den Server mit "LightPanda serve" starten und dann unseren Agenten ausführen, der die drei URLs von MDN abruft und die Informationen an Claude übergibt.
00:03:22Und hier erhalten wir eine Antwort, die uns den Unterschied zwischen Map, Filter und Reduce erklärt und die Metriken zurückgibt.
00:03:29Versuchen wir das nun mit Chrome und stellen sicher, dass wir jegliches Standard-Caching entfernen, da LightPanda kein vollwertiger Browser ist und nicht das gleiche Caching wie Chrome besitzt.
00:03:38Es ist also nur fair, es auch aus Chrome zu entfernen.
00:03:40Dann führen wir das Gleiche in Chrome aus, das ebenfalls die URLs von MDN abruft und uns eine Antwort von Claude gibt.
00:03:46Aber hier unterscheiden sich die Dinge drastisch.
00:03:48Wenn wir die Ergebnisse nebeneinander legen – LightPanda hier und Chrome dort – machen beide drei Abrufe.
00:03:54Aber wir sehen, dass die Abrufzeit für LightPanda viel schneller war, fast doppelt so schnell wie bei Chrome.
00:03:59Die "Wall Time" ist gleich.
00:04:01Aber seht euch das an: Der Browser-Speicher für LightPanda beträgt nur 66 Megabyte, während es bei Chrome 829 sind.
00:04:07Also mehr als 10-mal so viel bei LightPanda. Auch der Agenten-Speicher ist bei LightPanda etwas geringer, aber die Browser-Engine würde diesen Wert nicht stark beeinflussen.
00:04:17Ehrlich gesagt solltet ihr nie wieder Chrome für Headless Browsing verwenden.
00:04:20Ich meine, warum auch? LightPanda ist bis zu 21-mal kleiner als Chrome, schneller und verbraucht viel weniger Arbeitsspeicher.
00:04:28Aber es gibt ein Szenario, in dem ihr vielleicht lieber Chrome anstelle von LightPanda verwenden möchtet.
00:04:33Wenn wir den Prompt von der JavaScript-Frage dazu ändern, mir fünf Immobilien von Airbnb in Tokio zu suchen, liefert die Ausführung mit Chrome die erwarteten Ergebnisse.
00:04:42Wenn man das Gleiche jedoch mit LightPanda versucht, sieht man, dass es die Einträge von Airbnb nicht abrufen kann.
00:04:47Das liegt daran, dass Airbnb eine Single-Page-Application (SPA) ist, während LightPanda zwar eine V8-Engine zur Ausführung von JavaScript hat.
00:04:54Diese ist jedoch nur für die Ausführung auf Sprachebene gedacht.
00:04:57Also für Async/Await, Closures, Promises und Ähnliches.
00:05:00Aber bei komplexeren Dingen wie dieser Single-Page-Application von Airbnb hat LightPanda Probleme, sie zu rendern und alle relevanten Informationen zu erhalten.
00:05:07Abgesehen davon, dass SPAs nicht korrekt gerendert werden können – was sich vielleicht in Zukunft ändern wird, ich weiß es nicht.
00:05:13LightPanda ist ein großartiges Tool oder eine Ergänzung für einen benutzerdefinierten Agenten, der Websuchen durchführen oder Webdaten abrufen muss.
00:05:20Und wenn wir schon beim Thema Web-Browsing mit Agenten sind: Falls ihr jemals wolltet, dass Claude Code eure tatsächlich laufende Chrome-Sitzung sicher steuert.
00:05:27Also mit euren Logindaten und allem, dann schaut euch dieses Video über Remote-Debugging mit dem Chrome MCP-Server an.