JavaScript 渲染

JavaScript 渲染的工作原理

服务器可能只发送一小段 HTML 文档，其中包含脚本标签和空白的页面容器。浏览器先构建初始文档对象模型（DOM），再下载并执行脚本。

这些脚本可以通过 fetch、XMLHttpRequest 或 WebSocket 请求更多数据，再将商品、价格、搜索结果或其他元素添加到 DOM 中。滚动页面、点击或输入文字后，脚本也可能改变页面内容。

页面不一定只有一个最终状态。初次加载完成后，定时器、实时更新和用户事件仍可能不断改变 DOM。

响应 HTML 与渲染后的 DOM

普通 HTTP 客户端只能接收响应 HTML。无头浏览器可以执行脚本，并让采集工具使用 CSS 选择器等工具查询生成的 DOM。

网页采集何时需要渲染

以下情况通常需要 JavaScript 渲染：

• HTML 响应中缺少内容。 浏览器在 API 请求完成后插入内容。
• 交互后才显示结果。 点击、滚动或提交表单会触发请求。
• 路由加载时无需完整刷新页面。 单页应用会直接替换 DOM 中的部分内容。
• 数值实时变化。 价格、供应情况或状态数据会在初始文档加载后到达。

网站使用 JavaScript，并不代表一定需要浏览器渲染。应先检查响应 HTML 和允许访问的网络端点。解析嵌入的 JSON 或使用有文档说明的 API，通常占用的计算资源更少。

通过代理渲染

Playwright 和 Puppeteer 等浏览器自动化工具可以加载页面、执行脚本，并等待特定元素出现。应在浏览器或浏览器上下文级别配置代理，确保常规的文档、脚本和数据请求使用同一路由。

一组相关操作应始终使用相同的 Cookie 和出口 IP。页面加载期间轮换 IP，可能导致服务器端会话不一致。代理只能改变网站看到的来源 IP，不能执行 JavaScript，也无法修正浏览器指纹。

应等待页面特定的选择器出现，而不是使用固定延迟。并发和请求速率不得超过网站限制，同时应遵守网站的 robots.txt 和条款。

常见问题

网页采集中的 JavaScript 渲染是什么？

JavaScript 渲染是指先执行页面脚本，再提取数据。这样，采集工具就能访问原始 HTML 响应中没有的内容。

如何判断网站是否需要 JavaScript 渲染？

将原始 HTML 响应与浏览器显示的内容进行比较。如果所需元素只在脚本运行或交互后出现，可能需要使用浏览器渲染。

JavaScript 渲染与服务端渲染相同吗？

不同。客户端渲染是在响应到达后，由浏览器运行脚本；服务端渲染则是在发送响应前，由服务器生成 HTML。不过，有些网站会同时使用这两种方式。