当我们需要在网页上显示大量数据时，普通的列表渲染方式会导致浏览器性能问题，因为一次性渲染所有元素会占用大量内存和计算资源。虚拟列表（Virtual List）通过仅渲染可视区域内的元素来优化性能。为了实现后台数据请求和虚拟列表渲染，下面我将详细讲解如何设计、实现、优化虚拟列表。

1. 虚拟列表的原理

虚拟列表的基本原理是：

  • 只渲染视口内的元素：通过监听滚动事件，确定当前视口内的元素范围，动态渲染这些元素。
  • 动态加载更多数据：当用户滚动到接近底部时，后台请求新的数据，并且更新视口内的列表项。
  • 节省内存和提高性能：只渲染当前可视区域的 DOM 元素，避免一次性渲染所有列表项，减少内存消耗。

2. 实现步骤

接下来我会详细讲解如何实现一个虚拟列表，其中包括后台数据请求、滚动监听、以及虚拟化优化的关键步骤。

2.1 准备数据和请求接口

为了实现虚拟列表，我们需要有一个后台接口来分批返回数据，假设接口每次返回100条数据。每次请求的数据是分页的。

// 模拟后台接口
function fetchData(startIndex, endIndex) {
  return new Promise((resolve) => {
    const data = [];
    for (let i = startIndex; i < endIndex; i++) {
      data.push({ id: i, name: `Item ${i}` });
    }
    setTimeout(() => resolve(data), 500); // 模拟请求延时
  });
}

在实际应用中，你可以将这个接口替换为真实的 HTTP 请求（例如使用 fetch 或 axios）。

2.2 HTML 结构

首先，我们设置一个 container 容器，并在其中渲染一个 list 元素来放置所有的数据项。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>虚拟列表</title>
  <style>
    #container {
      height: 400px;
      overflow-y: auto;
      position: relative;
      border: 1px solid #ccc;
    }
    .item {
      height: 50px;
      padding: 10px;
      margin: 5px 0;
      background-color: #f0f0f0;
      border-radius: 5px;
    }
  </style>
</head>
<body>
  <div id="container">
    <div id="list"></div>
  </div>
  <script src="app.js"></script>
</body>
</html>
  • #container 是包含滚动条的父容器，设定高度和 overflow-y: auto，允许垂直滚动。
  • .item 是每一项数据的样式。
2.3 JavaScript 逻辑

现在我们将编写 app.js 来实现虚拟列表的核心逻辑。

// app.js
const container = document.getElementById('container');
const list = document.getElementById('list');

// 数据存储
let data = []; 
let itemHeight = 50; // 每项高度
let buffer = 5; // 缓冲区，提前加载更多项
let totalItems = 1000; // 假设数据量为1000条
let visibleCount = Math.ceil(container.clientHeight / itemHeight); // 当前可见的列表项数
let startIndex = 0; // 起始索引
let endIndex = visibleCount; // 结束索引

// 请求后台数据
function fetchData(start, end) {
  return new Promise((resolve) => {
    const fetchedData = [];
    for (let i = start; i < end; i++) {
      fetchedData.push({ id: i, name: `Item ${i}` });
    }
    setTimeout(() => resolve(fetchedData), 500); // 模拟延时
  });
}

// 渲染数据
function renderList(start, end) {
  fetchData(start, end).then((fetchedData) => {
    data = fetchedData;
    list.innerHTML = ''; // 清空之前的列表项
    fetchedData.forEach(item => {
      const div = document.createElement('div');
      div.className = 'item';
      div.textContent = item.name;
      list.appendChild(div);
    });
  });
}

// 处理滚动事件
function onScroll() {
  const scrollTop = container.scrollTop;
  const scrollHeight = container.scrollHeight;
  const containerHeight = container.clientHeight;

  // 判断是否接近底部，加载更多数据
  if (scrollTop + containerHeight >= scrollHeight - buffer * itemHeight) {
    startIndex = endIndex;
    endIndex = endIndex + visibleCount; // 每次加载可见区域数量
    renderList(startIndex, endIndex);
  }

  // 更新虚拟列表容器的位置（避免过多的 DOM 元素）
  list.style.transform = `translateY(${scrollTop}px)`;
}

// 初始化虚拟列表
function init() {
  renderList(startIndex, endIndex);

  // 监听滚动事件
  container.addEventListener('scroll', onScroll);
}

// 启动虚拟列表
init();

3. 核心功能解析

3.1 数据请求（fetchData）
  • fetchData(start, end) 模拟从后台请求数据。
  • 每次请求的数据是从 start 到 end 索引之间的项，我们模拟了一个延时，模拟网络请求。
  • 你可以根据实际情况将其替换为真实的 HTTP 请求接口。
3.2 渲染列表（renderList）
  • 每次请求成功后，我们会清空当前列表 list.innerHTML = ''，然后将请求的数据通过循环生成 DOM 元素，并附加到 list 中。
  • div.className = 'item' 为每一项设置样式。
3.3 滚动事件处理（onScroll）
  • 监听滚动事件，当用户滚动时，我们判断是否需要加载更多数据。
  • 通过 scrollTop + containerHeight >= scrollHeight - buffer * itemHeight 来判断是否接近底部，决定是否加载新的数据。
  • buffer 是一个缓冲区，用来提前加载部分数据，防止空白显示。
3.4 虚拟化优化
  • 滚动优化：通过 list.style.transform = translateY(scrollTop) 来调整元素的位置，避免了频繁的 DOM 更新。这是虚拟列表的关键：保持尽可能少的 DOM 元素，且通过 CSS transform 来调整可视元素的位置。
  • 按需渲染：根据 startIndex 和 endIndex 计算渲染哪些数据，并动态更新它们。

4. 性能优化

4.1 缓存数据
  • 为了减少请求次数，我们可以缓存已经加载的数据。每次滚动时，检查数据是否已经加载，避免重复请求。
4.2 清理 DOM 元素
  • 对于滚出视窗的数据项，我们需要及时销毁它们。可以通过一些方法来回收不再显示的 DOM 元素。
4.3 动态调整项高度
  • 如果每个列表项的高度不同，可以动态计算每个项的高度，并根据实际高度调整 scrollTop。
4.4 请求合并
  • 可以将多次请求合并为一次批量请求，减少请求次数和延迟时间。

5. 总结

虚拟列表技术可以极大地提高页面性能，尤其是在数据量很大的情况下。它通过只渲染当前视窗可见的项，避免一次性渲染所有数据项，并动态加载更多数据。

  • 数据请求：后台数据分批次加载，避免一次性请求大量数据。
  • 滚动监听：动态渲染当前视窗内的数据项。
  • 虚拟化：优化滚动时的 DOM 更新，只改变可见区域内的内容。

通过实现虚拟列表，你可以显著提升性能，尤其是在渲染大数据量时，避免页面卡顿。

# 经验分享 # 深度学习 # 后端
Logo
2048 AI社区

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

上下文工程驱动智能体向 “连续性认知”跃迁

例如在文章开头，我们举的产品经理和工程师之间的那一段对话，一个高质量智能体，不再只是让大模型回答用户的问题，而是通过上下文工程，帮助大模型在回答前获得更加结构化的输入，包括项目状态、需求文档、任务历史、甚至团队氛围，实现大模型更好的理解当前的任务规划、团队过往的沟通隐患、对方的工作状态与担忧、文档/知识库的实时状态等等。这和我们维护我们手机上内存很像，一开始所有应用和历史信息都保留，但当手机出现运

avatar 2048 AI社区

如何通过usbkey智能密码钥匙完成用户登录的双因子认证

摘要： 随着数字化转型加速，企业Web系统面临严峻安全挑战。本文剖析USBKey智能密码钥匙如何通过双因子认证（挑战-响应与数字证书）构建全链路安全防护，其核心技术包括国密算法芯片、硬件级安全存储及跨平台兼容能力。实际应用中，金融、政务、工业等领域部署案例显示：USBKey可有效防范钓鱼攻击、实现电子签章安全及产线准入控制，某城商行年损失减少1200万元。未来将融合AI行为分析、量子密钥分发等技术

avatar 2048 AI社区
cover

游戏引擎以及游戏开发

avatar 2048 AI社区