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

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

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

browserjavascriptpuppeteerproduct-update

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

FourA 的 browser tasks 通过为每个请求运行一个真实的 headless Chrome 实例来解决这个问题。

工作原理

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

  1. 启动一个 headless Chrome 浏览器
  2. 导航到目标 URL
  3. 等待 JavaScript 执行且 DOM 稳定
  4. （可选）等待特定的 CSS 选择器出现
  5. 返回完全渲染后的 HTML

整个过程都在 FourA 的基础设施上运行。您将获得干净的 HTML 返回，无需安装浏览器，无需配置 Puppeteer，也无需管理 Chrome 更新。

何时使用 Browser Tasks

在以下情况下使用 browser tasks：

  • 单页面应用（React、Vue、Angular）
  • 具有延迟加载内容的页面（无限滚动、“加载更多”按钮）
  • 需要 cookie 同意或初始 JS 设置的网站
  • 处于客户端身份验证流程之后的内容

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

  • 服务端渲染的 HTML 页面（新闻网站、博客、维基百科）
  • 直接返回 JSON 的 REST APIs
  • 速度是首要考虑因素（browser tasks 需要 2-10 秒，而 single 任务只需不到 1 秒）

示例：抓取 React 应用

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

waitFor 选择器指示 FourA 在捕获页面之前，先等待 .dashboard-content 出现在 DOM 中。这确保了所有异步数据都已加载。

性能优化建议

  • 始终将 waitFor 与特定的选择器配合使用，而不是依赖超时设置。这样既快速又可靠。
  • 设置合理的超时时间。 15 秒足以覆盖大多数 SPAs。只有在后端确实非常缓慢时才增加该值。
  • 默认使用 single，只有在响应中缺失内容时才切换到 browser。

下一步计划

我们正在开发更多的浏览器功能，包括屏幕截图捕获、PDF 生成以及多步骤导航（点击、滚动、填写表单）。但即使没有这些额外功能，browser tasks 也已经解决了最常见的痛点：从 JavaScript 渲染的页面中获取实际内容，而不是一个空壳。

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