Vue项目中实现高性能列表虚拟滚动的高级技术原理和实现步骤

本文链接：https://blog.csdn.net/qq_60535125/article/details/146178918

在 Vue 项目中实现高性能列表虚拟滚动的技术原理和步骤涉及以下几个关键点：减少 DOM 元素的渲染、提高滚动性能、动态加载可视区域内的内容等。虚拟滚动（也称为虚拟化滚动或窗口化滚动）是一种通过仅渲染可视区域内的元素来提高滚动性能的技术。以下是详细的技术原理和实现步骤。

高性能列表虚拟滚动的核心原理：

只渲染可见的列表项：
- 在虚拟滚动中，只渲染用户可见区域的元素。随着滚动的进行，动态加载进入视口的元素并移除离开视口的元素。
- 这意味着你并不会一次性渲染整个列表，而是基于滚动位置和列表项的高度来判断哪些元素应该显示。
元素高度的固定或估算：
- 对于不规则高度的列表项，通常需要对每个列表项的高度进行估算。可以选择使用固定高度或者通过测量真实的高度来实现虚拟滚动。
- 在固定高度的情况下，计算是相对简单的，可以根据视口的高度和单项的高度来推算需要渲染多少项。
- 在不规则高度的情况下，使用容器总高度与单个元素的高度来计算滚动位置，并动态调整。
滚动事件监听与位置计算：
- 监听滚动事件来动态更新列表项的渲染状态。根据滚动位置来决定哪些项目需要渲染或移除。
优化渲染：
- Lazy Loading：只有在需要时才渲染新的列表项，避免多余的 DOM 更新。
- 滚动事件节流：通过节流或防抖技术减少滚动事件的触发频率，避免频繁的 DOM 更新。
- 批量渲染：将渲染操作进行批量处理，避免频繁的单项渲染操作。

实现步骤：

计算可视区域的高度和每项的高度：
- 获取容器的高度和每项的高度（固定高度或通过计算得出）。
初始化状态：
- 定义初始状态，如列表的总高度、当前可视区域的位置、可视区域内的项目数量等。
监听滚动事件：
- 通过监听滚动事件，动态更新渲染内容。计算当前滚动位置，然后计算出需要渲染的元素范围（即根据滚动位置显示的项）。
动态更新渲染的列表项：
- 根据当前滚动位置计算出需要渲染的列表项，并只渲染这些项，其它项不渲染。通过在数据源中选择可视区域内的数据来实现。
更新 DOM：
- 使用 v-for 渲染可见的列表项。由于只渲染可视区域内的项目，减少了 DOM 元素的数量，从而提高了性能。
计算和渲染隐藏的空白区域：
- 为了保持滚动位置和页面布局一致，通常需要计算并渲染占位的空白区域（占据不可视区域的虚拟空间）。这通过设置一个空白容器或通过调整滚动容器的 padding-top 和 padding-bottom 来实现。

代码示例：

以下是一个简单的 Vue 实现虚拟滚动的示例：

<template>
  <div class="virtual-scroll" @scroll="onScroll" ref="container">
    <div class="virtual-scroll-content" :style="{ height: totalHeight + 'px' }">
      <div v-for="(item, index) in visibleItems" :key="index" class="virtual-item" :style="getItemStyle(index)">
        {{ item }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: Array(10000).fill().map((_, index) => `Item ${index + 1}`), // 假设有10000条数据
      itemHeight: 50, // 每项的高度
      visibleCount: 10, // 可视区域内的数量
      bufferCount: 5, // 可视区域前后各渲染的预加载数量
      totalHeight: 0, // 所有列表项的总高度
      scrollTop: 0, // 当前滚动位置
      startIndex: 0, // 可视区域开始的索引
    };
  },
  computed: {
    visibleItems() {
      const endIndex = this.startIndex + this.visibleCount + this.bufferCount;
      return this.items.slice(this.startIndex, endIndex);
    },
  },
  methods: {
    onScroll() {
      const container = this.$refs.container;
      const scrollTop = container.scrollTop;
      this.scrollTop = scrollTop;

      // 计算当前可视区域开始和结束的索引
      this.startIndex = Math.max(0, Math.floor(scrollTop / this.itemHeight) - this.bufferCount);
      this.totalHeight = this.items.length * this.itemHeight; // 总高度等于每项高度 * 项目总数
    },
    getItemStyle(index) {
      const top = (this.startIndex + index) * this.itemHeight;
      return {
        position: 'absolute',
        top: `${top}px`,
        height: `${this.itemHeight}px`,
      };
    },
  },
  mounted() {
    this.totalHeight = this.items.length * this.itemHeight;
  },
};
</script>

<style scoped>
.virtual-scroll {
  position: relative;
  overflow-y: auto;
  height: 500px; /* 可视区域高度 */
}
.virtual-scroll-content {
  position: relative;
}
.virtual-item {
  position: absolute;
  width: 100%;
  box-sizing: border-box;
  background-color: #f4f4f4;
  border-bottom: 1px solid #ddd;
  padding: 10px;
}
</style>

关键步骤：

onScroll 方法：监听滚动事件，动态计算当前显示的项目范围（startIndex）。
getItemStyle 方法：根据 startIndex 和 index 计算每项的 top 样式，用于正确定位项。
visibleItems 计算属性：返回可视区域内的项目，根据当前的 startIndex 和可见项数计算需要渲染的项目。
动态高度设置：通过设置总高度 (totalHeight) 来模拟整个列表的高度，从而创建占位符。

优化建议：

节流和防抖：对于滚动事件，可以使用节流（throttle）或防抖（debounce）技术，减少滚动事件触发频率，提升性能。
动态高度计算：对于不规则高度的列表项，可以通过 ResizeObserver 或 getBoundingClientRect 动态获取每个项的高度，进一步优化虚拟滚动体验。
双向虚拟滚动：在垂直和水平方向都应用虚拟滚动，可以极大地提升性能，尤其是在表格等数据密集型应用中。

通过这些原理和步骤，你可以在 Vue 项目中实现高性能的虚拟滚动，减少 DOM 元素的渲染，提高滚动性能，适用于大量数据的场景。