Transcript
00:00:00这是 LightPanda,一款专为 AI 智能体设计的无头浏览器,它完全由 Zig 语言从零编写,没有使用 WebKit 或 Chromium,这使得它的速度比无头 Chrome 快 9 倍,内存占用减少了 16 倍。
00:00:12它甚至暴露了 Chrome 开发协议,因此可以与 Puppeteer 或 Playwright 一起使用,但它不会渲染任何像素,也不支持 Service Workers、IndexedDB 和 CORS 等常见的 Web API。
00:00:22那么,为什么 OpenClaw 和 Cells 智能体浏览器会使用它呢?点击订阅,让我们一探究竟。
00:00:30LightPanda 由 Pierre、Francis 和 Kate 在 2024 年左右发布,远在 Claude Code 出现之前,也就是 ChatGPT 开始流行的时候。
00:00:41它最初是一个网络抓取和自动化工具,但在智能体迅速走红后,他们将重点转向了 AI 智能体,并因此获得了一轮融资。
00:00:51但这是因为 AI 的流行而进行的简单重塑,还是它真的适合智能体?
00:00:56我们将通过使用 Claude SDK 和自定义的 WebFetch 工具构建自己的智能体来测试这一点,我们将使用 Chrome 和 LightPanda 作为网页浏览引擎,并比较它们的差异,看看哪一个更好,以及原因。
00:01:09虽然 LightPanda 确实有一个 MCP 服务器,并有自己的云服务,但我们将尽量在本地完成操作。
00:01:16我们将先介绍 LightPanda 的基本用法,然后再扩展到制作 WebFetch 工具。
00:01:22这是一个脚本,它主要从维基百科获取一堆链接。
00:01:27它的工作原理是首先创建一个 LightPanda 服务器,然后使用 Puppeteer 连接到该服务器。
00:01:32我们这里有一些代码来检查处理过程需要多长时间,它会访问维基百科,浏览参考文献部分的所有链接并将它们打印出来。
00:01:40如果你想看个画面,参考文献部分就在这个网页浏览页面的下方。
00:01:44如你所见,第一个参考文献链接是这个 Device Atlas,它与下面的链接相匹配。
00:01:50所以 LightPanda 在 344 毫秒内找到了所有链接。
00:01:53如果我们尝试用 Chrome 做同样的事情,则需要 392 毫秒。
00:01:58所以差别不是很大,但当你需要抓取多个页面时,情况就会发生剧烈变化。
00:02:04这是一个类似的脚本,但有一个重大区别。
00:02:07我们不再是从一个维基百科页面获取链接,而是处理 100 个页面。
00:02:11如果我们查看定义,可以看到它将从网页浏览器获取的所有页面,包括 HTTPS、JavaScript、Mongo、Python 等等。
00:02:19如果我们尝试用 LightPanda 运行,整个过程在 18 秒内完成。
00:02:23如果我们尝试用 Chrome 做同样的事情,则需要大约 30 秒。
00:02:26在某些情况下,当我运行此操作时,它花费了 60 秒。
00:02:29但让我们看看如果通过智能体运行,性能会有什么不同。
00:02:32这里我有一个使用 Claude SDK 的基础智能体,那边有一个运行此提示词的 WebFetch 工具。
00:02:39它总结了 JavaScript 中 ArrayMap、Filter 和 Reduce 之间的区别,并访问 MDN 上的这些特定链接来查找相关信息。
00:02:48下面是我们的智能体循环,因为这里只有一个工具,所以有一个 if 语句来检查是否正在使用该特定工具。
00:02:54但如果我们有更多工具,情况就会有所不同。
00:02:56这里是每当有工具调用时都会使用的 webfetch 函数。
00:03:00在它下面,我们有一些指标以及一个计算浏览器内存的函数。
00:03:04这个项目将使用 Chrome DevTools 协议来使用 LightPanda 和 Chrome。
00:03:09所以我们将在一个端口上运行它,Puppeteer 将在运行智能体之前连接到该端口。
00:03:14我们可以使用 LightPanda serve 启动服务器,然后运行我们的智能体,它会从 MDN 获取三个 URL,并将信息提供给 Claude。
00:03:22它给了我们一个回复,告诉我们 Map、Filter 和 Reduce 之间的区别,并返回了指标。
00:03:29现在让我们用 Chrome 试试,一定要删掉它所有的默认缓存,因为 LightPanda 不是一个成熟的浏览器,没有 Chrome 那样的缓存级别。
00:03:38所以从 Chrome 中删除缓存才公平。
00:03:40然后我们在 Chrome 中运行同样的操作,它也从 MDN 获取 URL,并给出 Claude 的答案。
00:03:46但这里的情况却截然不同。
00:03:48如果我们把结果并排放置,这边是 LightPanda,那边是 Chrome,它们都进行了三次获取。
00:03:54但我们可以看到 LightPanda 的获取时间快得多,几乎比 Chrome 快两倍。
00:03:59挂钟时间是一样的。
00:04:01但看看这里,LightPanda 的浏览器内存仅为 66 兆字节,而 Chrome 则为 829 兆字节。
00:04:07所以 LightPanda 的内存占用是 Chrome 的 10 分之 1 不到,智能体内存对于 LightPanda 来说也稍微小一点,但浏览器引擎对此值的改变影响不会太大。
00:04:17老实说,你再也不应该使用 Chrome 进行无头浏览了。
00:04:20我是说,你为什么要用它呢?LightPanda 比 Chrome 小 21 倍,速度更快,内存占用更少。
00:04:28但有一种情况你可能想用 Chrome 而不是 LightPanda。
00:04:33如果我们把提示词从 JavaScript 问题改为“帮我从东京的 Airbnb 获取五个房源”,使用 Chrome 运行就能得到预期的结果。
00:04:42但如果你尝试用 LightPanda 做同样的事,我们会发现它无法获取 Airbnb 的列表。
00:04:47这是因为 Airbnb 是一个单页应用程序(SPA),而 LightPanda 虽然有 V8 引擎来执行 JavaScript。
00:04:54这只是为了语言层面的执行。
00:04:57比如 async await、闭包、Promise 之类的东西。
00:05:00但对于像 Airbnb 这样复杂的单页应用程序,LightPanda 在渲染并获取所有相关信息方面确实比较吃力。
00:05:07所以除了不能正确渲染 SPA 之外(也许未来会改进,谁知道呢)。
00:05:13LightPanda 是一个很棒的工具,非常适合添加到需要进行任何 Web 搜索或 Web 获取的自定义智能体中。
00:05:20说到智能体网页浏览,如果你曾经想让 Claude Code 安全地控制你实际运行的 Chrome 会话。
00:05:27包括你的登录详情等所有内容,那么请查看这个关于使用 Chrome MCP 服务器进行远程调试的视频。