虚拟滚动加加载的原理和实现思路

合集 - 前端小知识点(35)
1.使用同一个链接，如何实现PC打开是web 应用、手机打开是一个H5应用2.如何保证用户的使用体验3.如何解决页面请求接口大规模并发问题4.设计一套全站请求耗时统计工具5.大文件上传6.h5如何解决移动端适配问题7.实现站点一键换肤功能实现方式有哪些8.如何实现网页加载进度条9.常见图片懒加载方式有哪些10.cookie构成部分有哪些11.DNS协议了解多少12.函数式编程了解多少13.一直在window上面挂东西是否有什么风险14.小程序为什么会有两个线程15.如何通过设置失效时间清除本地存储的数据?16.如果不使用脚手架，如果用webpack构建一个自己的react应用17.用 nodejs 实现一个命令行工具，统计输入目录下面指定代码的行数18.package.json 里面 sideEffects 属性的作用19.script 标签上有那些属性20.SPA 中使用 hash 路由时作用和意义21.用户访问页面白屏了，原因是啥如何排查?22.[代码实现]S 中如何实现大对象深度对比23.JavaScript 中处理 100 万数据时确保性能和流畅度的几种方法24.<script> 标签放在 HTML 文档的 <body> 内底部
25.虚拟滚动加加载的原理和实现思路
26.ts二刷27.promise面试题28.命令行创建 uni-app 项目29.uniapp+v3的小知识点30.ts文件忽略校验31.['',''].join(" ").trim()32.自定义导航栏交互(导航栏左上角按钮+滚动动画效果)33.可视化点击x轴标签实现标签文字切换34.运行vue -V的时候vue : 无法加载文件 C:\Users\jiaho\AppData\Roaming\npm\vue.ps1，因为在此系统上禁止运行脚本35.uniapp+vue2实现下载相关
收起

以下是关于虚拟滚动加加载的原理和实现思路：

一、虚拟滚动原理

1. 基本概念

  • 可视区域：
    • 用户在屏幕上看到的部分，是实际渲染内容的窗口。只有处于可视区域内的元素才会被渲染到 DOM 中，而其他部分不会被渲染，从而减少 DOM 元素的数量，提高性能。

2. 实现思路

  • 数据存储与显示：

    • 存储大量的数据列表，但仅渲染可视区域内的数据。例如，有一个包含 10000 个元素的数据列表，但可视区域内只能显示 10 个元素，那么仅渲染这 10 个元素。

  • 计算可视区域：

    • 计算可视区域的高度和位置，根据滚动位置确定需要显示的数据范围。例如，通过 scrollTop （滚动条的滚动距离）、clientHeight （可视区域的高度）和 itemHeight （每个元素的高度）来计算开始和结束索引。

  • 监听滚动事件：

    • 监听滚动容器的滚动事件，当滚动时重新计算可视区域和需要渲染的数据范围，更新 DOM 元素。

二、代码示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Virtual Scrolling</title>
  <style>
    #scroll-container {
      height: 300px;
      overflow-y: scroll;
      position: relative;
    }
    #content {
      position: absolute;
      width: 100%;
    }
    #content div {
      height: 30px;
      line-height: 30px;
    }
  </style>
</head>
<body>
  <div id="scroll-container">
    <div id="content"></div>
  </div>
  <script>
    const data = Array.from({ length: 10000 }, (_, i) => `Item ${i}`);
    const itemHeight = 30;
    const container = document.getElementById('scroll-container');
    const content = document.getElementById('content');

    function renderItems(startIndex, endIndex) {
      content.innerHTML = '';
      for (let i = startIndex; i < endIndex; i++) {
        const item = document.createElement('div');
        item.textContent = data[i];
        content.appendChild(item);
      }
    }

    function onScroll() {
      const scrollTop = container.scrollTop;
      const startIndex = Math.floor(scrollTop / itemHeight);
      const endIndex = Math.floor((scrollTop + container.clientHeight) / itemHeight);
      renderItems(startIndex, endIndex);
    }

    container.addEventListener('scroll', onScroll);
    // 初始渲染
    onScroll();
  </script>
</body>
</html>

三、代码解释

  • CSS 部分：

    • #scroll-container 是滚动容器，设置 overflow-y: scroll 允许垂直滚动，height 限定可视区域的高度。
    • #content 是实际渲染元素的容器，使用 position: absolute 以便动态调整其位置。

  • JavaScript 部分：

    • data 是一个包含大量元素的数组。
    • itemHeight 是每个元素的高度，这里设置为 30px。
    • renderItems 函数根据开始和结束索引，将对应的数据元素添加到 content 容器中。
    • onScroll 函数在滚动时被调用，根据滚动位置计算开始和结束索引，调用 renderItems 函数更新显示。

四、加载更多原理

1. 基本概念

  • 分页加载：
    • 当滚动到列表底部时，加载更多数据添加到列表中，类似于分页的概念，但用户体验更加流畅，无需手动点击分页按钮。

2. 实现思路

  • 滚动到底部检测：

    • 计算滚动位置和内容高度，当滚动到底部时触发加载更多数据的操作。例如，当 scrollTop + clientHeight >= scrollHeight 时，表示滚动到了底部。

  • 加载数据：

    • 当滚动到底部时，通过 AJAX 或其他方式从服务器或数据源获取新的数据，添加到原数据列表中，更新可视区域的渲染。

五、代码示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Virtual Scrolling with Load More</title>
  <style>
    #scroll-container {
      height: 300px;
      overflow-y: scroll;
      position: relative;
    }
    #content {
      position: absolute;
      width: 100%;
    }
    #content div {
      height: 30px;
      line-height: 30px;
    }
  </style>
</head>
<body>
  <div id="scroll-container">
    <div id="content"></div>
  </div>
  <script>
    let data = Array.from({ length: 100 }, (_, i) => `Item ${i}`);
    const itemHeight = 30;
    const container = document.getElementById('scroll-container');
    const content = document.getElementById('content');
    let isLoading = false;

    function renderItems(startIndex, endIndex) {
      content.innerHTML = '';
      for (let i = startIndex; i < endIndex; i++) {
        const item = document.createElement('div');
        item.textContent = data[i];
        content.appendChild(item);
      }
    }

    function onScroll() {
      const scrollTop = container.scrollTop;
      const startIndex = Math.floor(scrollTop / itemHeight);
      const endIndex = Math.floor((scrollTop + container.clientHeight) / itemHeight);
      renderItems(startIndex, endIndex);

      if (scrollTop + container.clientHeight >= container.scrollHeight - itemHeight &&!isLoading) {
        isLoading = true;
        // 模拟从服务器加载数据
        setTimeout(() => {
          const newData = Array.from({ length: 100 }, (_, i) => `Item ${data.length + i}`);
          data = data.concat(newData);
          isLoading = false;
          renderItems(0, data.length);
        }, 1000);
      }
    }

    container.addEventListener('scroll', onScroll);
    // 初始渲染
    onScroll();
  </script>
</body>
</html>

六、代码解释

  • CSS 部分：

    • 与之前的虚拟滚动示例类似，设置滚动容器和元素的样式。

  • JavaScript 部分：

    • data 初始包含 100 个元素。
    • isLoading 用于标记是否正在加载数据，避免重复加载。
    • onScroll 函数在滚动时，除了更新可视区域的渲染，还检查是否滚动到底部，若是，则使用 setTimeout 模拟从服务器加载数据（添加 100 个新元素），更新 data 并重新渲染。

七、总结

  • 虚拟滚动：

    • 仅渲染可视区域内的数据，通过监听滚动事件更新渲染的元素，减少 DOM 元素数量，提高性能。

  • 加载更多：

    • 当滚动到列表底部时，加载更多数据添加到列表中，实现无缝滚动加载，提高用户体验。

通过结合虚拟滚动和加载更多的技术，可以在处理大量数据列表时，提供流畅的用户体验和良好的性能，避免页面卡顿和长时间的加载等待。在实际应用中，可以根据具体需求优化代码，例如添加加载动画、优化数据加载方式等。

posted @   jialiangzai  阅读(135)  评论(0)  编辑  收藏  举报
相关博文：
· 如何实现网页加载进度条
· FE知识点(硕哥)
· 记录--虚拟滚动探索与封装
· 说说你对虚拟滚动的理解
· 渲染十万条数据就把你卡住了？不存在的
阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· .NET10 - 预览版1新功能体验（一）

喜欢请打赏

扫描二维码打赏

微信打赏

了解更多

点击右上角即可分享
微信分享提示
AI FOR CODE 大赛