使用puppeteer创建pdf的最佳实践是哪种？

Question

我正在使用puppeteer从HTML模板创建pdf。以下两种解决方案中的最佳做法是哪种方法？

1.始终启动puppeteer并创建一个新的浏览器以创建pdf。完成创建pdf后，浏览器将关闭。

(async () => {
  const finalHtml = 'html content...';
  const browser = await puppeteer.launch();
  const page = await browser.pages()[0];
  await page.setContent(finalHtml);
  await page.pdf({path: 'hn.pdf', format: 'A4'});

  await browser.close();
})();

2.保留1个实例浏览器。始终创建一个新页面来创建pdf。完成创建pdf后，页面将关闭

const browser = await puppeteer.launch();

(async () => {
  const finalHtml = 'html content...';
  const page = await browser.newPage();
  await page.setContent(finalHtml);
  await page.pdf({path: 'hn.pdf', format: 'A4'});
  await page.close();
})();

谢谢提前。

编辑1：此外，上述两种解决方案的优缺点是什么？

Answer 1

短暂的浏览器（每次打开新的浏览器实例）

优点：

• 每次都会打开一个新会话，一个实例不会干扰另一个实例。
• 非常适合在同一/多个网站上测试多个凭据。
• 可以使用实例范围的代理。

缺点：

• 您无法轻松地在两个实例之间共享数据（除非您使用userDataDir或cookies）。
• 需要更多时间才能打开。

长寿命浏览器（每次共享相同的浏览器实例）

优点：

• 与打开带有空配置文件的新镶边相比，打开新标签所需的时间更少。
• 易于在两个实例之间共享数据。完美地抓取/测试具有相同凭据的相同网站。

缺点：

• 您将无法使用不同的凭据在同一网站上使用身份验证和cookie。
• 无法使用实例范围的代理（在此菜单中）。

基准测试

这是仅运行100次的基准。

要运行的代码：

const bench = require("@entrptaher/async-bench");
const puppeteer = require("puppeteer");

const createNewBrowser = async function() {
  const finalHtml = "html content...";
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.setContent(finalHtml);
  await page.pdf({ path: "hn_shortlived.pdf", format: "A4" });
  await browser.close();
  return true;
};

let longLivedBrowser;
const useExisting = async function() {
  const finalHtml = "html content...";
  if (!longLivedBrowser) {
    longLivedBrowser = await puppeteer.launch();
  }
  const page = await longLivedBrowser.newPage();
  await page.setContent(finalHtml);
  await page.pdf({ path: "hn_longlived.pdf", format: "A4" });
  await page.close();
  return true
};

let longLivedNoNewTab;
const useExitingTab = async function() {
  const finalHtml = "html content...";
  if (!longLivedNoNewTab) {
    longLivedNoNewTab = await puppeteer.launch();
  }
  const page = (await longLivedNoNewTab.pages())[0];
  await page.setContent(finalHtml);
  await page.pdf({ path: "hn_longlived.pdf", format: "A4" });
  return true
};

const times = 100;

Promise.all([
  bench(createNewBrowser, times),
  bench(useExisting, times),
  bench(useExitingTab, times)
]).then(console.log);

结果：

[ { meanExecTime: 277.3644104500115,
    execTime: 27736.44104500115,
    resultOfMethod: true },
  { meanExecTime: 36.89182792000472,
    execTime: 3689.1827920004725,
    resultOfMethod: true },
  { meanExecTime: 11.07780257999897,
    execTime: 1107.780257999897,
    resultOfMethod: true } ]

每个都有：

• meanExecTime：平均运行时间
• execTime：总运行时间
• resultOfMethod：只是一些识别结果

该基准测试是不完整的，因为它没有机器的详细信息等。但是它确实表明，每次打开浏览器都将花费更多时间，即使只有100次也是如此。

在第二个功能上，您还将注意到打开新标签页需要花费时间，因此在第三个功能上，如果不关闭页面，则将花费更少的时间。

摘要：

• 如果您需要性能（11ms，而277ms），则不必担心会话，请选择现有选项卡。
• 如果要在同一窗口上并行运行多个测试，请转到新选项卡。
• 如果您需要会话和持久性，请使用新的浏览器实例。