puppeteer的两个可能常用的场景实践

时间：2023-02-07 22:57:49

之前写文章介绍过 puppeteer 在“非侵入式骨架屏”中的实践，今天再来介绍两个场景。

puppeteer + SSR

使用 Puppeteer 实现服务端预渲染的好处是不需要对项目代码进行任何调整，却能获取到 SSR 应用的收益。当然，它的灵活性和扩展性都有所局限。甚至在 Node.js 端渲染的性能成本也较高，不过该技术也逐渐落地，并在很多场景发挥了重要价值。

比如：

<html>
<body>
  <div >
    <!-- Populated by the JS below. -->
  </div>
</body>
<script>
// 使用 JavaScript 脚本，进行 CSR 渲染
function renderPosts(posts, container) {
  const html = posts.reduce((html, post) => {
    return `${html}
      <li class="post">
        <h2>${post.title}</h2>
        <div class="summary">${post.summary}</div>
        <p>${post.content}</p>
      </li>`;
  }, '');
  container.innerHTML = `<ul >${html}</ul>`;
}
(async() => {
  const container = document.querySelector('#container');
  // 发送数据请求
  const posts = await fetch('/posts').then(resp => resp.json());
  renderPosts(posts, container);
})();
</script>
</html>

该页面是一个典型的 CSR 页面，依靠 Ajax，实现了页面动态化渲染。

当在 Node.js 端使用 Puppeteer 渲染时，我们可以实现ssr.mjs，完成渲染任务，如下代码：

import puppeteer from 'puppeteer';
// 将已经渲染过的页面，缓存在内存中
const RENDER_CACHE = new Map();
async function ssr(url) {
  // 命中缓存
  if (RENDER_CACHE.has(url)) {
    return {html: RENDER_CACHE.get(url), ttRenderMs: 0};
  }
  const start = Date.now();
  // 使用 Puppeteer launch 一个无头浏览器
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  try {
    // 访问页面地址直到页面网络状态为 idle
    await page.goto(url, {waitUntil: 'networkidle0'});
    // 确保 #posts 节点已经存在
    await page.waitForSelector('#posts');
  } catch (err) {
    console.error(err);
    throw new Error('page.goto/waitForSelector timed out.');
  }
  // 获取 html 内容
  const html = await page.content(); 
  // 关闭无头浏览器
  await browser.close();
  const ttRenderMs = Date.now() - start;
  console.info(`Headless rendered page in: ${ttRenderMs}ms`);
  // 进行缓存存储
  RENDER_CACHE.set(url, html);
  return {html, ttRenderMs};
}
export {ssr as default};

对应server.mjs代码：

import express from 'express';
import ssr from './ssr.mjs';
const app = express();
app.get('/', async (req, res, next) => {
  // 调用 SSR 方法渲染页面
  const {html, ttRenderMs} = await ssr(`xxx/index.html`);
  res.set('Server-Timing', `Prerender;dur=${ttRenderMs};desc="Headless render time (ms)"`);
  return res.status(200).send(html);
});
app.listen(8080, () => console.log('Server started. Press Ctrl+C to quit'));

当然上述实现比较简陋，只是进行原理说明。如果更进一步，我们可以从以下几个角度进行优化：

  • 改造浏览器端代码，防止重复请求接口；
  • 在 Node.js 端，abort 掉不必要的请求，以得到更快的服务端渲染响应速度；
  • 将关键资源内连进 HTML；
  • 自动压缩静态资源；
  • 在 Node.js 端，渲染页面时，重复利用 Chrome 实例。

比如：

import express from 'express';
  import puppeteer from 'puppeteer';
  import ssr from './ssr.mjs';
  // 重复使用 Chrome 实例
  let browserWSEndpoint = null;
  const app = express();

  app.get('/', async (req, res, next) => {
    if (!browserWSEndpoint) {
      // 一下两行代码不必随着渲染重复执行
      const browser = await puppeteer.launch();
      browserWSEndpoint = await browser.wsEndpoint();
    }

    const url = `${req.protocol}://${req.get('host')}/index.html`;
    const {html} = await ssr(url, browserWSEndpoint);

    return res.status(200).send(html);
  });

Puppeteer 实现海报 Node.js 服务

海报分享目前最常见的有两种：“截屏分享”和“划句分享”。
拿前者来说，一般生成海报可以使用​​html2canvas​​这样的类库完成，这里面的技术难点主要有跨域处理、分页处理、页面截图时机处理等。整体来说，并不难实现，但是稳定性一般。另一种生成海报的方式就是使用 Puppeteer，构建一个 Node.js 服务来做页面截图。

核心技术无外乎使用 Puppeteer，访问页面并截图，这与刚才的场景是一样的。

但是，为了实现更好的性能，我们可以用一个链接池来存储 Puppeteer 实例，以备所需。就像这样：

链接池优化puppeteer也是面试中可能会出现的考点！

在实现上，笔者使用了 generic-pool 库，这个库提供了 Promise 风格的通用池，可以用来对一些高消耗、高成本资源的调用实现防抖或拒绝服务能力，一个典型场景是对数据库的连接。这里我们把它用于 Puppeteer 实例的创建，如下代码所示：

const puppeteer = require('puppeteer')
const genericPool = require('generic-pool')
const createPuppeteerPool = ({
  // pool 的最大容量
  max = 10,
  // pool 的最小容量
  min = 2,
  // 连接在池中保持空闲而不被回收的最小时间值
  idleTimeoutMillis = 30000,
  // 最大使用数
  maxUses = 50,
  // 在连接池交付实例前是否先经过 factory.validate 测试
  testOnBorrow = true,
  puppeteerArgs = {},
  validator = () => Promise.resolve(true),
  ...otherConfig
} = {}) => {
  const factory = {
    // 创建实例
    create: () =>
      puppeteer.launch(puppeteerArgs).then(instance => {
        instance.useCount = 0
        return instance
      }),
    // 销毁实例
    destroy: instance => {
      instance.close()
    },
    // 验证实例可用性
    validate: instance => {
      return validator(instance).then(valid =>
        // maxUses 小于 0 或者 instance 使用计数小于 maxUses 时可用
        Promise.resolve(valid && (maxUses <= 0 || instance.useCount < maxUses))
      )
    }
  }
  const config = {
    max,
    min,
    idleTimeoutMillis,
    testOnBorrow,
    ...otherConfig
  }
  // 创建连接池
  const pool = genericPool.createPool(factory, config)
  const genericAcquire = pool.acquire.bind(pool)
  // 池中资源连接时进行的操作
  pool.acquire = () =>
    genericAcquire().then(instance => {
      instance.useCount += 1
      return instance
    })
  pool.use = fn => {
    let resource
    return pool
      .acquire()
      .then(r => {
        resource = r
        return r
      })
      .then(fn)
      .then(
        result => {
          // 释放资源
          pool.release(resource)
          return result
        },
        err => {
          pool.release(resource)
          throw err
        }
      )
  }
  return pool
}
module.exports = createPuppeteerPool

使用连接池的方式也很简单，如下代码：

const pool = createPuppeteerPool({
  puppeteerArgs: {
    args: config.browserArgs
  }
})
module.exports = pool

该真正使用了，笔者封装了一个方法，该方法支持接受一个 URL 也支持接受具体的 HTML 字符串去生成相应海报：

// 获取连接池
const pool = require('./pool')
const config = require('./config')
const render = (ctx, handleFetchPicoImageError) =>
  // 使用连接池资源
  pool.use(async browser => {
    const { body, query } = ctx.request
    // 打开新的页面
    const page = await browser.newPage()
    // 服务支持直接传递 HTML 字符串内容
    let html = body
    // 从请求服务的 query 获取默认参数
    const {
      width = 300,
      height = 480,
      ratio: deviceScaleFactor = 2,
      type = 'png',
      filename = 'poster',
      waitUntil = 'domcontentloaded',
      quality = 100,
      omitBackground,
      fullPage,
      url,
      useCache = 'true',
      usePicoAutoJPG = 'true'
    } = query
    let image
    try {
      // 设置浏览器视口
      await page.setViewport({
        width: Number(width),
        height: Number(height),
        deviceScaleFactor: Number(deviceScaleFactor)
      })
      if (html.length > 1.25e6) {
        throw new Error('image size out of limits, at most 1 MB')
      }
      // 访问 URL 页面
      await page.goto(url || `data:text/html,${html}`, {
        waitUntil: waitUntil.split(',')
      })
      // 进行截图
      image = await page.screenshot({
        type: type === 'jpg' ? 'jpeg' : type,
        quality: type === 'png' ? undefined : Number(quality),
        omitBackground: omitBackground === 'true',
        fullPage: fullPage === 'true'
      })
    } catch (error) {
      throw error
    }
    ctx.set('Content-Type', `image/${type}`)
    ctx.set('Content-Disposition', `inline; filename=${filename}.${type}`)
    await page.close()
    return image
  })
module.exports = render

至此，基于 Puppeteer 的海报系统就已经开发完成了。它是一个对外的 Node.js 服务。

标签：

相关文章