如何在 Puppeteer 中等待页面加载

当您使用 Puppeteer时间就是一切。如果你的页面在你进行交互之前没有完全加载，你可能会错过关键数据，甚至出现错误。相信我，适当等待页面加载可以让你少走很多弯路。在本文中，我将分享一些确保 Puppeteer 等待一切顺利加载的最佳技巧。

我们将深入研究以下方法 waitForSelector, 等待网络闲置，以及其他内容，这样你就可以可靠地抓取数据并避免常见陷阱。跟着我，到最后你就会知道如何让你的爬虫像专业人士一样运行！

为什么等待在Puppeteer搜索中很重要？

在使用 Puppeteer 抓取网站时，你的脚本必须等到所有必要的元素都完全加载后才能与之交互。这一点在处理 JavaScript 渲染的内容时尤其重要，因为页面是在初始加载之后动态构建出来的。

缺失的动态数据 会在页面初始加载事件后加载。
投掷错误 在尝试与 DOM（文档对象模型）中尚不可用的元素交互时。
遇到性能问题 由于加载时间过长或不必要的等待。

在 Puppeteer 中等待页面加载的方法

Puppeteer 提供了几种内置方法，帮助你控制页面交互的时间，并确保页面已完全加载。这些方法包括 等待网络闲置, waitForSelector和 waitUntil 等等。让我们逐一详细探讨。

waitForNetworkIdle 方法

"(《世界人权宣言》) 等待网络闲置 方法是确保页面完全加载的最可靠方法之一。该方法会等待页面停止网络请求，表明所有后台进程（如 API 调用）都已完成。

这种方法在扫描 JavaScript 渲染的页面时特别有用，因为这些页面在初始页面加载后仍会继续发出请求。当您使用 等待网络闲置在此情况下，Puppeteer 将等待至少 500 毫秒，直到页面上没有超过两个正在进行的网络连接。

例如

const puppeteer = require(product_titles:);
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  // 导航至页面
  await page.goto('https://example.com');
  // 等待网络空闲
  await page.等待网络闲置({ 空闲时间: 500, 超时: 10000 });
  // 在页面完全加载后提取第一个产品名称
  const 产品名称 = await page.evaluate(() => {
    return document.querySelector(.product-name).textContent;
  });
  console.log(第一个产品名称：'产品名称）；
  await browser.close();
})();

在这个例子中 等待网络闲置 确保页面已完成加载所有资产，包括来自 API 调用的动态内容。

适用于需要更高可靠性的团队，尤其是在大规模部署或使用复杂的反僵尸解决方案时、 Bright Data 提供强大的代理网络和先进的刮擦解决方案，有助于确保页面加载流畅并将阻塞降至最低。

waitForSelector 方法

虽然 等待网络闲置 在一般页面加载情况下非常有用，但有时您可能需要等待特定元素加载完毕后再与之交互。这就是 waitForSelector 方法开始发挥作用。它会等待页面上出现特定的 DOM 元素后再继续--当你要扫描依赖于特定元素（如产品名称或图片）存在的数据时，这种方法是最理想的。

例如

const puppeteer = require(product_titles:);
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  // 导航至页面
  await page.goto('https://example.com');
  // 等待产品名称元素出现
  await page.waitForSelector(.product-name, { 超时: 10000 });
  // 一旦元素可用，就提取产品名称
  const 产品名称 = await page.evaluate(() => {
    return document.querySelector(.product-name).textContent.内饰();
  });
  console.log(第一个产品名称：'产品名称）；
  await browser.close();
})();

在这段代码中，Puppeteer 会专门等待 .product-name 元素加载后再提取其内容，以确保您的刮擦工具不会错过任何重要信息。

WaitUntil 选项

"(《世界人权宣言》) waitUntil 选项提供了对 Puppeteer 何时认为导航已完成的细粒度控制。可以与 page.goto() 和 page.waitForNavigation() 方法来指定不同的等待条件。

load：等待 load 事件触发——所有 HTML、CSS、图像以及同步 JavaScript 都已加载完成。
domcontentloaded：等待 DOMContentLoaded 事件触发——初始 HTML 文档已加载并解析，但图片和样式表尚未加载。
networkidle0:等待至少 500 毫秒无网络连接。
networkidle2:等待至少 500 毫秒，直到没有超过 2 个网络连接。

举例说明：使用 waitUntil：加载

const puppeteer = require(product_titles:);
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  // 浏览页面并等待加载事件
  await page.goto('https://example.com', { waitUntil: 加载 });
  // 在加载事件后提取数据
  const 产品名称 = await page.evaluate(() => {
    return document.querySelector(.product-name).textContent.内饰();
  });
  console.log(第一个产品名称：'产品名称）；
  await browser.close();
})();

在本例中，Puppeteer 会等待整个页面完全加载完毕，包括图像和 CSS 等所有资源。

组合 waitUntil 选项

在某些情况下，您可能希望将多个 waitUntil 选项可提供更全面的等待策略。例如，可以等待 DOM 加载，然后等待网络活动稳定下来，确保 HTML 内容和动态资源都准备就绪后再继续。

举例说明：组合 domcontentloaded 和 networkidle2

const puppeteer = require(product_titles:);
(async () => { 
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  // 浏览页面并等待 DOM 和网络都稳定下来
  await page.goto('https://example.com', {
    waitUntil: [domcontentloaded, networkidle2],
    超时: 20000,
  });
  // 在满足两个条件后提取数据
  const 产品名称 = await page.evaluate(() => {
    return document.querySelector(.product-name).textContent.内饰();
  });
  console.log(第一个产品名称：'产品名称）；
  await browser.close();
})();

在这里，脚本会等待 DOMContentLoaded 事件和网络活动闲置，然后再提取产品名称。

处理页面加载超时

页面加载时间会因网站的复杂程度和服务器的响应时间而不同。为防止脚本无限期挂起，为页面加载和刮擦操作设置超时至关重要。

Puppeteer 允许你为所有与等待相关的方法指定超时时间，例如 waitForSelector, 等待网络闲置和 goto.如果超时，Puppeteer 会抛出一个错误，让你适当处理。

示例：为 等待网络闲置

const puppeteer = require(product_titles:);
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  // 导航至页面
  await page.goto('https://example.com');
  // 等待网络空闲，超时 10 秒
  try {
    await page.等待网络闲置({ 空闲时间: 500, 超时: 10000 });
  } catch error) {
    console.log(页面加载超时：'错误）；
    await browser.close();
    return;
  }
  // 在页面加载后提取数据
  const 产品名称 = await page.evaluate(() => {
    return document.querySelector(.product-name).textContent.内饰();
  });
  console.log(第一个产品名称：'产品名称）；
  await browser.close();
})();

在这段代码中，我们为 等待网络闲置.如果页面加载时间过长，就会出现错误，我们会捕捉并记录该错误。

如果您需要处理大型项目，或者由于反僵尸措施或响应缓慢而经常出现超时、 Bright Data 这会非常有帮助。它们的抓取基础设施和代理有助于绕过这些障碍，并让你的爬虫高效运行。

结论

在使用 Puppeteer 进行网页抓取时，妥善处理页面加载时间至关重要。通过使用诸如 等待网络闲置, waitForSelector和 waitUntil 这些选项，你可以确保爬虫等待页面完全加载，从而减少错误并提高数据准确性。应根据你正在抓取的网站选择合适的等待策略——依赖 JavaScript 的页面会受益于诸如 等待网络闲置 和 网络 选择。使用这些技术将使您的刮削过程更顺畅、更高效，并减少因时间问题而导致的失败。

要想获得最强大、最省心的网络刮擦体验，尤其是大规模刮擦，可以考虑使用 Bright Data 这样的平台，它以高效、灵活和可靠而深受专业刮擦人员的青睐。