如何在Puppeteer的waitForFunction方法中缓存查询到的DOM元素？

page.waitForFunction 传入的回调运行在浏览器原生上下文，无法访问Node.js侧变量，但可以直接利用浏览器侧的全局作用域或者闭包存储缓存值，避免重复执行DOM查询。

方法1：使用window全局对象挂载缓存（最易实现） #

直接把查询到的元素挂到window的自定义属性上，下次执行回调先判断有没有缓存，有就直接复用。

await page.waitForFunction(
    () => {
      // 优先取缓存，没有再执行DOM查询
      window._cachedListEl = window._cachedListEl || document.querySelector("#list");
      const listEl = window._cachedListEl;
      // 此处补充你原本的业务判断逻辑，比如判断元素是否符合预期条件
      return listEl && listEl.children.length > 0;
    },
    {
      polling: "mutation",
    }
);

方法2：使用闭包持有缓存（不污染全局作用域） #

通过立即执行函数返回实际的执行回调，缓存变量会被闭包持有，不会挂载到window上，避免全局命名冲突。

await page.waitForFunction(
    // 外层立即执行函数返回实际的回调函数，闭包持有缓存变量
    (() => {
      let cachedListEl = null;
      return () => {
        cachedListEl = cachedListEl || document.querySelector("#list");
        const listEl = cachedListEl;
        // 此处补充你原本的业务判断逻辑
        return listEl && listEl.children.length > 0;
      };
    })(),
    {
      polling: "mutation",
    }
);

注意事项 #

• 如果目标元素可能被DOM操作删除后重建，需要增加缓存失效逻辑，判断元素是否还在文档内，失效就重新查询：

  if (cachedListEl && !document.body.contains(cachedListEl)) {
    cachedListEl = null;
  }
  

• 多缓存场景下注意自定义的全局缓存属性名不要重复，避免互相覆盖。

内容的提问来源于stack exchange，提问作者stackcen