← 全部文章
产品动态 1 分钟阅读

Browser Tasks：如何抓取重度依赖 JavaScript 的网站

超过 70% 的现代网站需要 JavaScript 来渲染其内容。以下是当 HTTP 请求返回空内容时，FourA 的 browser tasks 如何为您获取完整的页面。

browserjavascriptpuppeteerproduct-update

超过 70% 的现代网站依赖 JavaScript 渲染内容。标准 HTTP request 只能获取初始 HTML 外壳。实际数据在 JavaScript 执行后才会加载，这就是传统抓取工具返回空页面的原因。

FourA 浏览器任务通过为每个 request 运行真实的 headless Chrome 实例来解决此问题。

工作原理

当你发送带有 type: "browser" 的任务时，FourA 会：

  1. 启动 headless Chrome 浏览器
  2. 访问目标 URL
  3. 等待 JavaScript 执行并等待 DOM 稳定
  4. （可选）等待特定 CSS selector 出现
  5. 返回完整渲染的 HTML

整个过程都在 FourA 的基础设施上运行。你无需安装浏览器、配置 Puppeteer 或管理 Chrome 更新，即可直接获取干净的 HTML。

何时使用浏览器任务

在以下情况下使用浏览器任务：

  • 单页面应用（React、Vue、Angular）
  • 包含懒加载内容的页面（无限滚动、“加载更多”按钮）
  • 需要 cookie 授权或初始 JS 设置的站点
  • 位于客户端身份验证流程之后的内容

在以下情况下继续使用 single 任务：

  • 服务端渲染的 HTML 页面（新闻网站、博客、Wiki）
  • 直接返回 JSON 的 REST API
  • 速度优先的场景（浏览器任务耗时 2 到 10 秒，而单一任务耗时不到 1 秒）

示例：抓取 React 应用

curl -X POST https://eu.api.foura.ai/api/v1/tasks \
  -H "X-API-Key: YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://example.com/dashboard",
    "type": "browser",
    "options": {
      "waitFor": ".dashboard-content",
      "timeout": 15000
    }
  }'

waitFor selector 会通知 FourA 等待 .dashboard-content 出现在 DOM 中后再捕获页面。这可确保所有异步数据均已加载完毕。

性能建议

  • 始终将 waitFor 与特定 selector 结合使用，而不是依赖超时等待。这种方式更快且更可靠。
  • 设置合理的超时时间。 15 秒足以覆盖大多数 SPA。仅在后端响应确实缓慢时增加该值。
  • 默认使用 single，仅在 response 中缺少内容时才切换为 browser。

后续计划

我们正在开发更多浏览器功能，包括截图捕获、PDF 生成以及多步导航（点击、滚动、填写表单）。即使没有这些扩展功能，浏览器任务也已经解决了最常见的痛点：从 JavaScript 渲染的页面中获取真实内容，而非空白外壳。

请查看 文档 获取完整的任务类型对比。