虚拟列表（不定高）

Student Wang

于 2025-04-11 08:36:19 发布

阅读量818

点赞数 14

文章标签： java 开发语言

本文链接：https://blog.youkuaiyun.com/w20041213/article/details/147132911

版权

一、基本概念

虚拟列表是一种优化长列表渲染性能的技术，在处理大量数据时，只渲染用户可见区域及附近的部分列表项，而非一次性渲染所有列表项，从而显著提升性能。不定高虚拟列表的难点在于每个列表项的高度不固定，需要动态计算每个列表项的位置和高度，关键点是在于使用预估高度和缓存真实高度相结合的方式来处理不定高的情况，同时需要实现高度缓存机制和动态更新可视区域的逻辑

二、实现虚拟列表的关键因素

1.列表项高度固定

原理：在列表项高度固定的情况下，能够轻松计算每个列表项的位置和可见区域。因为每个列表项的高度一致，所以只需知道列表项的索引，就可以依据固定高度算出其相对于列表顶部的偏移量。
实现步骤
1. 计算总高度：用列表项的数量乘以每个列表项的固定高度，得到整个列表的总高度。
2. 确定可见区域：依据滚动位置和容器高度，算出当前可见区域的起始和结束索引。
3. 渲染可见区域：仅渲染可见区域内的列表项，并且通过设置偏移量将它们定位到正确的位置。

2.列表项高度不定

原理：由于每个列表项的高度不固定，需要在列表项渲染时记录其实际高度，再根据这些高度计算每个列表项的偏移量，进而确定可见区域。
实现步骤
1. 记录高度：在列表项渲染时，记录每个列表项的实际高度。
2. 计算偏移量：根据已记录的列表项高度，算出每个列表项相对于列表顶部的偏移量。
3. 确定可见区域：依据滚动位置和容器高度，确定当前可见区域的起始和结束索引。
4. 渲染可见区域：只渲染可见区域内的列表项，并通过设置偏移量将它们定位到正确的位置。

三、核心逻辑（不定高）

1.纪录每个列表项的实际高度：通过在渲染后测量DOM元素获取真实高度，并使用Map结构缓存，避免重复测量

2.计算列表项的偏移量：基于已记录的实际高度，从上到下累加计算每个列表项的top和bottom位置

3.确定可视区域：根据容器的scrollTop和clienHeight，使用二分查找算法快速定位当前可视区域的起始和结束索引

4.渲染可视列表项：只渲染可视区域内的列表项，通过transform设置正确的偏移位置，同时添加缓冲区提升滚动体验

四、实战实践

（一）核心组成部分

1.容器结构

<div class="virtual-list-container" id="container">
    <!-- 用于撑开滚动条 -->
    <div class="virtual-list-phantom" id="phantom"></div>
    <!-- 实际渲染内容的容器 -->
    <div class="virtual-list" id="content"></div>
</div>

container：可视区域容器

phantom：撑开滚动条的占位元素

content：实际渲染的内容容器

2.核心系统

位置管理

this.positions = [{
    index: 0,
    height: 实际高度,
    top: 顶部位置,
    bottom: 底部位置
}];

可视范围计算

getVisibleRange() {
    const scrollTop = this.container.scrollTop;
    const viewportHeight = this.container.clientHeight;
    // 通过二分查找确定开始和结束索引
}

高度缓存

this.cachedHeights = new Map(); // 存储每项实际高度

（二）关键实现步骤

初始化数据

constructor(options) {
    // 初始估计高度
    this.estimatedItemHeight = options.estimatedItemHeight;
    // 缓存实际高度
    this.cachedHeights = new Map();
    // 缓冲区大小
    this.bufferSize = options.bufferSize || 5;
}

初始化虚拟列表

const virtualList = new VirtualList({
    // DOM 元素
    container: document.getElementById('container'),
    phantom: document.getElementById('phantom'),
    content: document.getElementById('content'),
    
    // 预估高度（根据实际内容估算）
    estimatedItemHeight: 80,
    
    // 上下缓冲区大小（可根据实际需求调整）
    bufferSize: 5
});

自定义渲染模版

// 在 render 方法中自定义每个列表项的渲染模板
div.innerHTML = `
    <div class="item-content">
        <!-- 自定义的内容结构 -->
        ${item.content}
    </div>
`;

处理动态数据更新

// 添加新数据
virtualList.items.push(newItem);
virtualList.initPositions();  // 重新初始化位置信息
virtualList.render();         // 重新渲染

// 更新现有数据
virtualList.items[index] = updatedItem;
virtualList.cachedHeights.delete(index);  // 清除该项的高度缓存
virtualList.render();

处理特殊场景

// 窗口大小改变时重新计算
window.addEventListener('resize', () => {
    virtualList.measureItemHeights();
    virtualList.render();
});

// 内容动态变化时更新高度
function updateItemContent(index, newContent) {
    virtualList.items[index].content = newContent;
    virtualList.cachedHeights.delete(index);  // 清除高度缓存
    virtualList.render();
}

五、虚拟列表优缺点

虚拟列表作为一种优化长列表渲染性能的技术，有其独特的优势，但也存在一定的局限性

优点

1. 性能显著提升
- 减少 DOM 操作：传统长列表会一次性将所有数据对应的 DOM 节点渲染到页面上，当数据量巨大时，会导致 DOM 树变得非常庞大，浏览器的渲染负担加重。而虚拟列表仅渲染用户可见区域及附近的少量列表项，大大减少了 DOM 节点的数量，从而显著提升页面的渲染速度和响应性能。
- 降低内存占用：由于减少了 DOM 节点的创建和维护，虚拟列表在内存使用上更为高效。浏览器无需为大量未显示的列表项分配内存空间，这有助于降低内存占用，减少页面卡顿和崩溃的风险。
2. 资源有效节省
- 节省带宽：在数据传输方面，虚拟列表仅请求和加载可见区域的数据，避免了一次性加载大量数据，从而节省了带宽资源，尤其在移动网络环境下，能有效降低用户的流量消耗。
- 减轻服务器负载：服务器无需一次性处理和返回所有数据，只需根据客户端的请求返回可见区域的数据，这有助于减轻服务器的处理压力，提高服务器的响应速度和稳定性。
3. 出色的用户体验
- 流畅滚动：用户在浏览长列表时，虚拟列表能够实现平滑、流畅的滚动效果，不会出现明显的卡顿现象。用户可以快速地滚动列表，随时查看所需的数据，提升了操作的便捷性和舒适度。
- 快速加载：页面加载速度的提升使得用户能够更快地看到列表内容，减少了等待时间，提高了用户对页面的满意度和使用意愿。
4. 良好的扩展性

虚拟列表的实现方式相对灵活，可以根据不同的业务需求进行定制和扩展。例如，可以轻松实现列表项的动态加载、排序、过滤等功能，以满足多样化的应用场景。

缺点

1. 实现复杂度较高
- 逻辑复杂：虚拟列表的实现需要考虑多个方面的因素，如滚动事件处理、列表项高度计算、可见区域判断、数据加载和更新等，涉及到较为复杂的算法和逻辑。对于开发者来说，实现一个稳定、高效的虚拟列表需要具备较高的技术水平和丰富的开发经验。
- 调试困难：由于虚拟列表的逻辑复杂，在开发和调试过程中可能会遇到各种问题，如列表项显示异常、滚动不流畅等。这些问题的定位和解决相对困难，需要花费较多的时间和精力。
2. 兼容性问题
- 浏览器兼容性：在某些旧版本的浏览器中，虚拟列表可能会存在兼容性问题。例如，一些浏览器对滚动事件的处理方式可能不同，或者对某些 CSS 属性和 JavaScript 特性的支持存在差异，这可能会导致虚拟列表在这些浏览器上无法正常工作。
- 设备兼容性：不同的设备在屏幕尺寸、分辨率、性能等方面存在差异，虚拟列表在不同设备上的表现可能会有所不同。开发者需要进行充分的测试和优化，以确保虚拟列表在各种设备上都能提供良好的用户体验。
3. 初始加载和交互响应问题
- 初始加载延迟：虽然虚拟列表在滚动过程中能够实现流畅的体验，但在页面初始加载时，可能需要一定的时间来计算列表项的高度和位置，以及加载初始可见区域的数据。这可能会导致页面出现短暂的加载延迟，影响用户的第一印象。
- 交互响应不及时：在某些情况下，如快速滚动列表或进行复杂的交互操作时，虚拟列表可能无法及时响应用户的操作，出现短暂的卡顿或闪烁现象。这可能会影响用户的操作体验，降低用户对页面的满意度。
4. 数据更新和维护难度大
- 数据更新复杂：当列表中的数据发生变化时，如新增、删除或修改列表项，虚拟列表需要及时更新可见区域的内容，并重新计算列表项的高度和位置。这涉及到复杂的数据同步和更新逻辑，容易出现数据显示不一致的问题。
- 状态维护困难：虚拟列表需要维护多个状态，如滚动位置、可见区域索引、列表项高度等。在处理复杂的交互和数据更新时，这些状态的维护和管理变得更加困难，容易出现状态混乱的情况。