术语

无头浏览器

无头浏览器是在没有可见用户界面的情况下运行的网页浏览器,用于通过代码完成截图、测试和抓取网页内容等自动化任务。

无头浏览器如何工作

无头浏览器拥有完整的浏览器引擎,与 Chrome、Firefox 或 Safari 渲染页面所用的代码相同,只是不会打开图形窗口。它会加载 HTML、执行 JavaScript、应用 CSS,并像可见浏览器一样渲染页面。唯一的区别在于,输出会进入屏幕外缓冲区,而不是显示器。

无头浏览器通常通过代码控制,例如使用 Puppeteer(用于 Chrome/Chromium)或 Playwright(用于 Chromium、Firefox 和 WebKit)。脚本可以打开 URL、等待内容加载、与页面交互并截图,全程无需人工操作鼠标或键盘。

由于不需要图形界面,无头浏览器占用的内存更少,也能在没有显示器的服务器、CI 流程和容器环境中运行。

无头浏览器的常见用途

  • 自动截图——大规模截取网页的视觉快照。产品页面、营销网站、文档和竞品页面都能通过代码处理。
  • 视觉回归测试——比较代码修改前后的截图,发现意外的 UI 差异。
  • 网页抓取——加载仅靠简单 HTTP 请求无法访问的 JavaScript 密集型页面,再提取渲染后的内容。
  • 生成 PDF——渲染网页并导出为 PDF 文档,保留它在浏览器中的版式。
  • 性能测试——无需显示浏览器窗口,就能测量页面加载时间、资源大小和渲染性能。

无头截图与有头截图

有头截图是用可见浏览器截取画面,操作直接但需要手动完成。用户打开页面、调整窗口大小,再按快捷键(Mac 为 Cmd+Shift+3,Windows 为 Win+Shift+S)。它适合偶尔截图,却无法应对大批量任务。

无头截图可以编程控制。一个脚本就能按顺序或并行截取数百个页面,并覆盖多种视口尺寸。它可以在没有显示器的服务器上运行,接入 CI/CD 流程,而且不论由谁执行,结果都保持一致。

两种模式的渲染结果几乎相同,但以下情况可能产生细微差异:系统字体(无头环境可能缺少桌面设备上安装的字体)、GPU 加速功能(无头模式可能使用软件渲染),以及需要明确等待到正确时刻才能截取的动画。

这种一致性正是无头浏览器对截图产品有价值的原因。只要通过脚本固定视口、DPR、等待条件和 Cookie,每次截图都会遵循同一套方案。相比在不同笔记本电脑上手动生成的截图,这些结果更容易比较、发布和验证。

常见问题

  • 没有等待内容加载。 无头浏览器运行很快,如果页面打开后立即截图,延迟加载的图片、网页字体和异步内容可能还未渲染。应先等待选择器、网络空闲或特定元素等明确条件。
  • 忽略视口和设备像素比。 无头模式的默认视口通常很小,例如 800x600。应明确设置视口尺寸和设备缩放系数,使其符合预期输出。
  • 缺少字体。 服务器环境往往没有桌面电脑中的字体,截图可能改用后备字体,改变文字外观。应安装必需字体,或使用包含这些字体的 Docker 镜像。
  • 忘记处理 Cookie 横幅和弹窗。 自动截图会像新访客一样打开网页。脚本中应关闭同意对话框和弹窗,否则截图只会显示浮层,而不是页面内容。

常见问题

无头模式与有头模式有什么区别?

有头模式会在屏幕上打开可见的浏览器窗口;无头模式则完全在后台运行,没有可见界面。两者使用相同的渲染引擎,无头模式只是省去了画面显示。

应该使用哪种无头浏览器?

Puppeteer 和 Playwright 是最常见的选择。Puppeteer 默认控制 Chrome/Chromium;Playwright 支持 Chromium、Firefox 和 WebKit,更适合跨浏览器截图。

无头浏览器截图准确吗?

准确。无头浏览器与有头版本使用相同的渲染引擎,因此多数情况下输出在视觉上相同。依赖 GPU 的功能、自定义字体和动画有时会造成差异。

可以用无头浏览器截取整个网页吗?

可以。Puppeteer 和 Playwright 都支持全页截图,可以截取整个可滚动内容,而不只是当前可见视口。

无头浏览器与截图 API 是一回事吗?

截图 API 通常是在托管服务背后运行无头浏览器,用户发送 URL 后直接获得图片,无需自己管理浏览器。无头浏览器则是由用户直接控制的底层工具。

参考资料

相关资料

什么是无头浏览器? | 术语表 | Shotomatic