高性能瀑布流+无限滚动+懒加载：七行代码让海量DOM浏览更顺畅

举报
watermelo37 发表于 2025/06/30 21:53:54 2025/06/30
【摘要】 作者：watermelo37涉及领域：Vue、SpingBoot、Docker、LLM、python等        华为云、腾讯云、阿里云、支付宝合作作者，全平台博客昵称watermelo37。        合作请＋v：Watermelo617，备注说明来意。一个假装是giser的coder，做不只专注于业务逻辑的前端工程师，java、docker、数据库、python、LLM均有涉猎。...

作者：watermelo37

涉及领域：Vue、SpingBoot、Docker、LLM、python等


        华为云、腾讯云、阿里云、支付宝合作作者，全平台博客昵称watermelo37。

        合作请＋v：Watermelo617，备注说明来意。一个假装是giser的coder，做不只专注于业务逻辑的前端工程师，java、docker、数据库、python、LLM均有涉猎。


---------------------------------------------------------------------

温柔地对待温柔的人，包容的三观就是最大的温柔。

---------------------------------------------------------------------

高性能瀑布流+无限滚动+懒加载：七行代码让海量DOM浏览更顺畅



一、海量数据如何处理


        在处理海量数据的场景中，如电商平台的商品列表、社交媒体的动态流或新闻网站的内容展示，瀑布流布局 和 无限滚动 是常见的交互设计。然而，传统实现方式往往存在性能瓶颈，尤其是在用户深度滚动时，页面会变得卡顿甚至崩溃。本文将介绍一种基于现代浏览器API的高性能解决方案，并通过七行核心代码实现无限滚动、懒加载与DOM回收的完美结合。

        瀑布流是一种布局方式，通常用于展示图片、卡片或其他内容。在这种布局中，内容项以列的形式排列，每一列的高度可以不同，类似于砌砖的样式。

        懒加载是一种优化技术，用于延迟加载页面上的某些资源（如图片、视频等），直到用户需要这些资源时才加载。这可以减少初始加载时间，提高页面性能。

        无限滚动是一种交互设计模式，用户在滚动页面时，页面会自动加载更多内容，而不是通过分页的方式显示。这提供了一种无缝的浏览体验。


二、传统实现方式的痛点


        在传统的无限滚动实现中，开发者通常依赖 scroll 事件监听器来判断是否需要加载更多内容：

window.addEventListener('scroll', () => {
  // 检查是否滚动到底部并加载更多
});

        这种方法存在下列问题：

  1. 高频触发 ：scroll 事件可能每秒触发数十甚至上百次，即使使用节流（throttle）或防抖（debounce），也会带来性能损耗。

  2. DOM膨胀与内存泄漏 ：随着用户不断滚动，页面中的 DOM 元素数量会持续增加，导致内存占用过高，影响渲染性能。

  3. 资源浪费 ：未进入视口的图片或内容仍然会被加载，增加了带宽消耗和初始加载时间。

        这些问题在数据量小时可能不明显，但当用户深度滚动时，页面性能会急剧下降，甚至崩溃。


三、七行核心代码的魔力


const observer = new IntersectionObserver(entries => {
  if (entries[0].isIntersecting && !isLoading) {
    isLoading = true;
    loadMoreItems().then(() => isLoading = false);
  }
});
observer.observe(document.querySelector('#sentinel'));

        这短短七行代码解决了传统实现的所有痛点，实现了性能最优的无限滚动。看似简单，实则蕴含了多重性能优化技巧，包括异步观察、状态锁管理和懒加载机制。


四、核心代码解析


1、使用IntersectionObserver代替Scroll事件

        传统实现依赖 scroll 事件，而 IntersectionObserver 是浏览器原生提供的 API，它能够异步观察目标元素与视口的交叉状态 ，只在需要时触发回调。这种方式比频繁触发的 scroll 事件高效得多。

const observer = new IntersectionObserver(entries => {
  if (entries[0].isIntersecting && !isLoading) {
    isLoading = true;
    loadMoreItems().then(() => isLoading = false);
  }
});
observer.observe(document.querySelector('#sentinel'));
  • 哨兵元素 ：#sentinel 是一个特殊的占位符元素，用于标记何时需要加载更多内容。
  • 异步触发 ：只有当哨兵元素进入视口时，才会触发回调，避免了不必要的计算。

2、虚拟列表与DOM回收

        为了进一步优化性能，我们需要对已有内容进行管理，而不是无限制地堆积 DOM 元素。以下是 DOM 回收的核心逻辑：

function recycleDOM() {
    const items = document.querySelectorAll('.item');
    items.forEach(item => {
        const rect = item.getBoundingClientRect();
        if (rect.bottom < -1000 || rect.top > window.innerHeight + 1000) {
            itemCache.set(item.dataset.id, item);
            item.remove();
        }
    });
}

        这种技术被称为"DOM回收"，确保DOM树的大小保持在可控范围内。通过 -1000 和 window.innerHeight + 1000 的缓冲区，确保只有完全超出视口范围的元素才会被移除。

3、状态锁避免重复请求

        注意代码中的isLoading状态锁，它防止在前一批数据加载完成前触发新的请求：

if (entries[0].isIntersecting && !isLoading) {
  isLoading = true;
  loadMoreItems().then(() => (isLoading = false));
}

        这个简单的状态管理避免了数据重复加载，减少了不必要的网络请求和DOM操作。

4、图片懒加载

        在无限滚动中，图片处理尤为关键。结合IntersectionObserver实现图片懒加载：

function setupImageLazyLoad() {
  const imgObserver = new Intersection0bserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src;
        imgObserver.unobserve(img);
      }
    });
  });
  document
    .querySelectorAll("img[data-src]")
    .forEach((img) => imgObserver.observe(img));
}
  • 按需加载 ：只有当图片接近视口时，才会加载其真实资源，大幅减少带宽消耗和初始加载时间。
  • 停止观察 ：加载完成后，调用 unobserve 方法停止观察该图片。


五、实战完整内容


        以下是一个完整的 InfiniteScroller 类，集成了无限滚动、DOM 回收和图片懒加载功能：

class InfiniteScroller {
  constructor(container, loadCallback, options = {}) {
    this.container = container;
    this.loadCallback = loadCallback;
    this.isLoading = false;

    // 合并默认选项和用户传入的选项
    this.options = {
      threshold: 200,
      recycleThreshold: 1000,
      batchSize: 20,
      ...options
    };

    // 创建一个哨兵元素，用于触发加载更多内容
    this.sentinel = document.createElement('div');
    this.sentinel.id = 'sentinel';
    this.container.appendChild(this.sentinel);

    // 初始化观察器和回收机制
    this.setupObserver();
    this.setupRecycling();
  }

  setupObserver() {
    // 使用 IntersectionObserver 监听哨兵元素是否进入视口
    this.observer = new IntersectionObserver(entries => {
      if (entries[0].isIntersecting && !this.isLoading) {
        this.isLoading = true;
        // 调用加载回调函数，并在加载完成后执行清理操作
        this.loadCallback(this.options.batchSize).then(() => {
          this.isLoading = false;
          this.recycleDOM(); // 回收超出视口范围的 DOM 元素
        });
      }
    });

    // 开始观察哨兵元素
    this.observer.observe(this.sentinel);
  }

  recycleDOM() {
    // 获取所有非哨兵的 .item 元素
    const items = this.container.querySelectorAll('.item:not(#sentinel)');
    items.forEach(item => {
      const rect = item.getBoundingClientRect();
      // 如果元素超出了回收阈值，则移除该元素
      if (
        rect.bottom < -this.options.recycleThreshold ||
        rect.top > window.innerHeight + this.options.recycleThreshold
      ) {
        item.remove();
      }
    });
  }

  destroy() {
    // 停止观察并断开 IntersectionObserver 实例
    this.observer.disconnect();
  }
}

        使用案例

const container = document.querySelector('.content-container');
const infiniteScroller = new InfiniteScroller(container, async (count) => {
  const newItems = await fetchData(count);
  renderItems(newItems, container);
});


六、结语


        通过上述七行核心代码和完整实现，我们成功解决了传统无限滚动方案的性能瓶颈。相比复杂的第三方库，这种基于现代浏览器 API 的实现更加轻量、高效且易于维护。关键优化点包括：

  1. IntersectionObserver 替代 scroll 事件，减少高频触发。
  2. DOM 回收 控制 DOM 树大小，避免内存占用过高。
  3. 图片懒加载 减少带宽消耗，提升初始加载速度。

        只有锻炼思维才能可持续地解决问题，只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助，麻烦您点个赞支持一下，还可以收藏起来以备不时之需，有疑问和错误欢迎在评论区指出~

【声明】本内容来自华为云开发者社区博主，不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com
容器
  • 点赞
  • 收藏
  • 关注作者

评论（0）

0/1000
抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认 取消

加入云驻计划，成为创作者

  • 华为云周边好礼
  • 免费体验产品
  • 特殊身份标识
  • 线下官方门票
  • 内部专家零距离
  • 与10000+优质创作者共同成长
立即加入