JavaScript实现无限滚动加载：性能优化与代码示例

作者：沉舟

时间：2026-10-30

深入解析JavaScript实现无限滚动加载的核心机制，提供基于IntersectionObserver与传统Scroll监听的完整代码示例，并针对高频触发、并发竞争与长列表DOM膨胀提供系统级性能优化方案。

文章目录

无限滚动（Infinite Scroll）是一种在用户将页面滚动到接近底部时，自动异步请求下一页数据并无缝追加到视图中的交互机制。它广泛应用于信息流、商品瀑布流和社交媒体动态等场景，免去了用户频繁点击“下一页”的操作负担。本文将从底层触发机制切入，完整演示基于现代 IntersectionObserver API 与传统 scroll 监听的两套实现代码，并针对高频触发、并发竞争以及 DOM 节点无限膨胀等核心痛点，提供可直接落地的性能优化与工程级防御策略。

一、无限滚动的运行模型与状态流转

无限滚动的本质是“视口与数据边界的联动检测”。当用户向下滚动内容时，程序需要持续感知视口底部与数据列表末尾的相对距离。一旦二者重合或小于预设阈值，前端便发起下一批次的数据请求，在拿到返回数据后完成 DOM 渲染，并为下一次滚动重置触发条件。

一个健壮的无限滚动加载并不是单纯发起网络请求，而是需要由严格的状态机进行全周期管控。这包括就绪态（idle）、加载中（loading）、加载完成（success）、数据耗尽（empty/ended）以及异常重试态（error）。

图 1：无限滚动数据加载的生命周期与门禁闭环流程

二、核心实现方式与代码示例

在前端工程实践中，主要有两种方式来检测用户是否到达列表底部：现代首选的 IntersectionObserver API，以及兼容老旧环境的传统 scroll 事件监听。

1. 方案一：现代推荐的 IntersectionObserver 实现

IntersectionObserver（交叉观察器）是浏览器提供的原生 API，它以异步、低开销的方式监控目标元素是否进入视口。实现无限滚动时，我们只需在列表最底部放置一个不可见的“哨兵元素”（Sentinel）。当哨兵元素进入视口时，浏览器主动触发回调函数，无需主线程进行任何数学几何运算。

<!-- HTML 基础骨架 -->
<div id="app">
  <ul id="item-list"></ul>
  <!-- 哨兵元素 -->
  <div id="sentinel" style="height: 20px; margin: 10px 0;"></div>
  <div id="status-indicator" style="text-align: center; color: #888;"></div>
</div>

class InfiniteScrollManager {
  constructor(listElement, sentinelElement, statusElement) {
    this.list = listElement;
    this.sentinel = sentinelElement;
    this.status = statusElement;
    this.page = 1;
    this.isLoading = false;
    this.hasMore = true;
    this.observer = null;

    this.initObserver();
  }

  initObserver() {
    // rootMargin 设置 200px 可提前发起预加载，避免用户触底时出现白屏等待
    const options = {
      root: null, // null 代表视口（Viewport）
      rootMargin: '0px 0px 200px 0px',
      threshold: 0.1
    };

    this.observer = new IntersectionObserver((entries) => {
      const entry = entries[0];
      // 当哨兵可见且处于空闲状态、仍有后序数据时触发加载
      if (entry.isIntersecting && !this.isLoading && this.hasMore) {
        this.fetchNextBatch();
      }
    }, options);

    this.observer.observe(this.sentinel);
  }

  async fetchNextBatch() {
    this.isLoading = true;
    this.status.textContent = '正在加载更多内容...';

    try {
      // 模拟分页接口请求
      const items = await this.mockApiRequest(this.page);

      if (!items || items.length === 0) {
        this.hasMore = false;
        this.status.textContent = '已展示全部内容';
        this.observer.unobserve(this.sentinel);
        return;
      }

      // 使用 DocumentFragment 批量挂载，减少重排
      const fragment = document.createDocumentFragment();
      items.forEach((item) => {
        const li = document.createElement('li');
        li.className = 'list-item';
        li.textContent = `条目 #${item.id} - ${item.title}`;
        fragment.appendChild(li);
      });

      this.list.appendChild(fragment);
      this.page += 1;
      this.status.textContent = '';
    } catch (error) {
      this.status.textContent = '加载失败，滚动重试';
      console.error('无限滚动加载出错:', error);
    } finally {
      this.isLoading = false;
    }
  }

  mockApiRequest(page) {
    return new Promise((resolve) => {
      setTimeout(() => {
        if (page > 5) { // 模拟总共 5 页
          resolve([]);
        } else {
          const mockData = Array.from({ length: 15 }, (_, i) => ({
            id: (page - 1) * 15 + i + 1,
            title: `动态数据内容第 ${page} 批次`
          }));
          resolve(mockData);
        }
      }, 500);
    });
  }
}

// 初始化
const listEl = document.getElementById('item-list');
const sentinelEl = document.getElementById('sentinel');
const statusEl = document.getElementById('status-indicator');
new InfiniteScrollManager(listEl, sentinelEl, statusEl);

2. 方案二：传统 onscroll 监听与几何计算

在缺乏 IntersectionObserver 支持或需要高度兼容老旧 WebView 的场景下，需要借助窗口的 scroll 事件并手动计算文档几何高度。由于滚动事件触发频率极高（每秒可达 60~120 次），必须结合节流函数（Throttle）以规避高频执行。

// 节流工具函数：限制指定时间间隔内只执行一次
function throttle(fn, delay) {
  let timer = null;
  let lastTime = 0;
  return function (...args) {
    const now = Date.now();
    if (now - lastTime >= delay) {
      lastTime = now;
      fn.apply(this, args);
    } else if (!timer) {
      timer = setTimeout(() => {
        lastTime = Date.now();
        timer = null;
        fn.apply(this, args);
      }, delay - (now - lastTime));
    }
  };
}

// 触底判定逻辑
function checkScrollBottom() {
  if (this.isLoading || !this.hasMore) return;

  const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
  const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  const clientHeight = document.documentElement.clientHeight || window.innerHeight;

  // 缓冲阈值：距离底部 150px 时提前拉取
  const threshold = 150;

  if (scrollTop + clientHeight >= scrollHeight - threshold) {
    this.fetchNextBatch();
  }
}

// 绑定节流后的滚动事件（200ms 执行一次）
window.addEventListener('scroll', throttle(checkScrollBottom, 200));

图 2：Scroll 事件监听与 IntersectionObserver 的运行特性深度对比

三、请求并发控制与边界状态管理

在实际网络环境中，请求延迟是不稳定的。如果用户在网络迟缓时多次滑动触发滚动点，极易发生“重复拉取同一页”或“后发请求先返回引起数据错乱”的问题。要构建工业级无限滚动，必须做好以下三项控制：

1. 引入并发锁与状态机

最基础的防线是在发起请求的第一行代码立即将 isLoading 设为 true，在 finally 块中再将其复位。任何处于 isLoading === true 期间触发的滚动信号必须立即被丢弃。

2. 使用 AbortController 取消过期或竞态请求

当用户在无限滚动列表上方切换了筛选 Tab 或排序条件时，当前正在挂起的上一页网络请求已经失去业务价值。如果放任其返回，会将旧筛选条件的数据追加到新筛选条件的内容中。利用 AbortController 可以在重置列表时安全中止旧请求：

let currentAbortController = null;

async function loadData(page, filterId) {
  // 如果存在前置请求，立即取消
  if (currentAbortController) {
    currentAbortController.abort();
  }
  
  currentAbortController = new AbortController();
  const { signal } = currentAbortController;

  try {
    const res = await fetch(`/api/items?page=${page}&filter=${filterId}`, { signal });
    const data = await res.json();
    renderItems(data.items);
  } catch (err) {
    if (err.name === 'AbortError') {
      console.log('上一请求已被主动取消');
    } else {
      showErrorUI();
    }
  } finally {
    currentAbortController = null;
  }
}

四、海量数据下的性能瓶颈：虚拟列表（Virtual List）

无限滚动虽然解决了分页点击的繁琐，却引入了一个严峻的底层问题：DOM 节点的无上限累积。当用户浏览了数十页、列表中驻留了数千甚至上万个复杂 DOM 节点时，页面的内存开销将呈线性飙升。

在海量节点下，任何微小的 CSS 修改或页面滚动都会触发大面积的重排（Reflow）与重绘（Repaint），最终导致滚动掉帧、卡顿甚至移动端浏览器直接崩溃闪退。解决这一问题的根本方案是——虚拟列表（Virtual List / Windowing）。

图 3：无限滚动中的 DOM 树增长对比与虚拟列表渲染原理

虚拟列表的核心算法逻辑

虚拟列表的核心在于按需挂载与位置模拟：

总高度占位：计算数据总长度乘以单项预估高度（totalHeight = totalCount * itemHeight），让外层容器具有原生且真实的滚动条。
可视索引计算：监听滚动位移 scrollTop，动态计算出当前应显示的起始索引 startIndex = Math.floor(scrollTop / itemHeight) 与结束索引 endIndex = startIndex + visibleCount。
缓冲区（Buffer）：在起始和结束位置前后各扩展 3~5 个节点，避免快速滑动时用户看到边缘空白。
偏移量定位（Offset）：通过 transform: translateY(startIndex * itemHeight) 将可见区域的几个 DOM 节点偏移到视口正中央。

五、生产环境工程化落地的检查清单

在完成基础代码逻辑编写后，将无限滚动投放到真实生产环境前，应逐项核对下述工程清单，确保交互鲁棒性：

图 4：无限滚动落地生产的三维质量保障体系

避坑提示：页面离开时的资源清理。在 SPA（如 Vue、React、Svelte）或频繁切换路由的前端项目中，务必在组件销毁或页面卸载的生命周期内，调用 observer.disconnect() 或移除 window.removeEventListener('scroll', ...)，否则长期挂载的监听器会导致严重的组件实例内存泄漏。

六、总结

实现无限滚动并不复杂，但实现一个平滑、省电、不掉帧且容错完善的工业级无限滚动，关键在于对浏览器渲染机制和网络竞态的深度把控：

API 选择：以 IntersectionObserver 作为首选方案，通过脱离主 JS 堆栈的硬件加速检测，避免强制同步重排；
防御性控制：利用并发锁（isLoading）配合 AbortController，彻底阻断无效网络请求与乱序竞争；
长列表演进：当列表项超出几百项阈值时，及时引入虚拟列表（Virtual List）进行 DOM 复用，从根源上化解 DOM 膨胀导致的页面假死与滚动卡顿。

遵循这一体系，开发者即可在保持代码清晰整洁的同时，为用户提供丝滑流畅的信息流浏览体验。