NodeJS、Mongoose与EJS应用如何实现无限滚动解决渲染缓慢问题

核心逻辑和你之前在PHP场景用的无限滚动思路完全一致，只需要把之前对接PHP接口的部分替换成Express的对应路由，不需要重构原有思路，就能解决全量数据渲染导致的首屏慢问题。

后端层改造 #

核心是把原来全量查询直出的逻辑，拆分为「首屏少量数据EJS直出」和「滚动触发的分页JSON接口」两部分：

• 首屏渲染路由：取消全量查询，仅加载首屏可视范围对应的记录数，避免EJS渲染时注入上千条数据导致的模板编译、HTML输出耗时
  示例代码：

  const PAGE_SIZE = 20; // 可根据实际页面单屏高度调整，一般取20-30条即可
  // 原来的低效写法（全量查询）
  // const allRecords = await YourModel.find();
  // res.render('list', { records: allRecords });
  
  // 改造后的首屏逻辑
  const firstBatchRecords = await YourModel.find()
    .sort({ _id: -1 }) // 按_id倒序排列，保证分页顺序稳定
    .limit(PAGE_SIZE);
  res.render('list', {
    records: firstBatchRecords,
    pageSize: PAGE_SIZE
  });
  

• 新增AJAX响应的JSON分页接口：用游标代替传统skip分页，避免大offset下MongoDB查询扫描全量文档的性能损耗
  示例代码：

  app.get('/api/records', async (req, res) => {
    // 从前端请求参数中获取当前已加载的最后一条记录的_id作为查询游标
    const lastLoadedId = req.query.lastId;
    const PAGE_SIZE = 20;
  
    // 游标查询：仅拉取比当前游标_id小的后续记录，全程走_id默认索引
    const nextBatch = await YourModel.find({
      _id: { $lt: lastLoadedId }
    })
    .sort({ _id: -1 })
    .limit(PAGE_SIZE);
  
    // 返回前端必要的状态标记，避免无效空请求
    res.json({
      data: nextBatch,
      hasMore: nextBatch.length === PAGE_SIZE
    });
  });
  

前端模板与交互逻辑 #

这部分和你在PHP项目里写的无限滚动逻辑完全通用，不需要调整原有实现思路，只需要对接上述新增的Express接口即可：

• EJS模板中预留列表容器、加载提示元素，循环渲染首屏后端返回的记录
  示例结构：

  <div class="record-list">
    <% records.forEach(item => { %>
      <div class="record-item" data-id="<%= item._id %>">
        <!-- 页面实际需要展示的记录内容 -->
        <h3><%= item.title %></h3>
        <p><%= item.summary %></p>
      </div>
    <% }) %>
    <div id="load-status" style="display: none;">加载中...</div>
  </div>
  

• 页面内嵌入原生JS实现滚动监听、AJAX请求、内容追加逻辑，和PHP场景的实现无差异
  示例代码：

  const loadStatusEl = document.getElementById('load-status');
  const recordListEl = document.querySelector('.record-list');
  let isRequesting = false; // 请求锁，避免滚动高频触发导致的重复请求
  let hasMore = true; // 数据加载状态标记
  const pageSize = <%= pageSize %>;
  
  // 监听窗口滚动事件
  window.addEventListener('scroll', () => {
    // 设置提前加载阈值：距离页面底部100px时触发请求，无需完全滚到底部
    const triggerPoint = window.innerHeight + window.scrollY;
    const totalPageHeight = document.documentElement.scrollHeight;
  
    if (triggerPoint >= totalPageHeight - 100 && !isRequesting && hasMore) {
      isRequesting = true;
      loadStatusEl.style.display = 'block';
  
      // 获取当前列表最后一条记录的_id作为请求游标
      const lastItem = document.querySelector('.record-item:last-child');
      const lastId = lastItem ? lastItem.dataset.id : null;
  
      // 发起AJAX请求拉取后续数据
      fetch(`/api/records?lastId=${lastId}`)
        .then(res => res.json())
        .then(resData => {
          // 将返回的新记录追加到列表中
          resData.data.forEach(item => {
            const itemNode = document.createElement('div');
            itemNode.className = 'record-item';
            itemNode.dataset.id = item._id;
            itemNode.innerHTML = `<h3>${item.title}</h3><p>${item.summary}</p>`;
            recordListEl.appendChild(itemNode);
          });
  
          // 更新状态标记
          hasMore = resData.hasMore;
          isRequesting = false;
          loadStatusEl.style.display = 'none';
  
          // 无更多数据时替换提示文案
          if (!hasMore) {
            loadStatusEl.textContent = '已加载全部内容';
            loadStatusEl.style.display = 'block';
          }
        })
        .catch(() => {
          isRequesting = false;
          loadStatusEl.style.display = 'none';
        });
    }
  });
  

落地注意事项 #

• Mongoose查询时仅取页面渲染需要的字段，不要全字段返回，减少数据传输开销
• 务必加上请求锁，避免滚动事件高频触发时产生重复请求，拖垮接口性能
• 游标查询依托MongoDB默认的_id唯一索引，无需额外建索引即可达到毫秒级响应
• 提前加载阈值可根据实际页面浏览速度调整，平衡加载体验和接口请求频率

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