如何统计网页未渲染的元素数量？Chrome扩展开发场景下的实现问题

方案1：拦截页面请求拿总条数（优先推荐，效率最高） #

绝大多数滚动加载的列表页，都会在首次加载时请求后端接口返回总记录数，或者直接返回全量列表数据仅前端做懒渲染，你可以通过Chrome扩展的能力直接拦截请求拿数据，不需要等DOM渲染，页面加载完成就能直接拿到准确数值。
实现逻辑：

• 在扩展的content script里注入代码重写fetch/XMLHttpRequest，匹配书籍列表的请求路径
• 拿到返回结果后直接提取total/count类的总数字段，或者直接统计全量列表的长度
• 直接把总数渲染到页面上即可，不需要监听DOM变化

方案2：读取页面全局变量 #

很多站点会把列表数据、总条数存在window下的全局变量里，你可以在页面加载完成后，打印window对象排查是否有类似bookList/totalCount的字段，有就可以直接读取，不需要动请求或者DOM。

方案3：自动触发滚动加载所有数据 #

如果前两个方案都走不通，你可以在页面加载完成后自动模拟滚动，触发所有懒加载数据渲染完成后再统计总数，过程中可以显示「统计中」的提示，不会影响用户体验：

// 自动滚动加载完整列表
async function loadAllBooks() {
  let lastLength = document.querySelectorAll("ul > li").length;
  // 滚动到底部触发加载
  window.scrollTo(0, document.body.scrollHeight);
  // 等待接口请求+DOM渲染
  await new Promise(resolve => setTimeout(resolve, 500));
  let currentLength = document.querySelectorAll("ul > li").length;
  // 还有新数据加载就继续滚动
  if (currentLength > lastLength) {
    return loadAllBooks();
  }
  // 无新数据即加载完成，返回总数量
  return currentLength;
}

// 页面加载完成后执行
window.addEventListener('load', async () => {
  const totalCount = await loadAllBooks();
  // 渲染总数到页面
  const countEl = document.createElement("span");
  countEl.innerText = ` 总书籍数：${totalCount}`;
  document.getElementsByTagName("h2")[0].appendChild(countEl);
  // 自动滚动回顶部，不影响用户原有操作
  window.scrollTo(0, 0);
})

现有代码的问题 #

你当前的代码逻辑有两处明显问题：

• 初始化的numBooks数组只存了首次加载的书籍数量，后续新增的DOM节点没有更新到这个数组里，统计值本身就不准确
• 没有处理首次加载完成后还没有触发滚动的场景，所以只有下滑触发DOM变更后才会更新数值

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