Vue应用中的大型列表渲染优化：虚拟滚动（Virtual Scrolling）的实现与性能优势 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

Vue 应用中的大型列表渲染优化：虚拟滚动（Virtual Scrolling）的实现与性能优势

大家好，今天我们要深入探讨 Vue 应用中一个非常重要的性能优化技术：虚拟滚动（Virtual Scrolling）。当我们需要渲染包含成百上千甚至更多条目的列表时，传统的渲染方式会迅速成为性能瓶颈，导致页面卡顿、响应缓慢。虚拟滚动正是解决这类问题的利器。

1. 传统列表渲染的性能问题

在传统的列表渲染中，Vue 会将列表中的所有条目都渲染到 DOM 中。对于小规模列表来说，这通常不是问题。但是，当列表变得非常庞大时，以下问题就会显现出来：

DOM 节点过多： 大量 DOM 节点会显著增加浏览器渲染引擎的负担，导致页面渲染速度变慢。
内存占用过高： 每个 DOM 节点都需要占用一定的内存空间，大量的节点会消耗大量的内存，甚至导致浏览器崩溃。
事件监听器过多： 如果列表中的每个条目都绑定了事件监听器（例如点击事件），那么大量的监听器会进一步降低性能。
初始渲染时间过长： 用户需要等待很长时间才能看到列表的内容，用户体验非常差。

2. 虚拟滚动的核心思想

虚拟滚动（也称为窗口化）的核心思想是：只渲染用户可见区域内的列表项，而不是渲染整个列表。

这意味着，对于一个包含 10000 个条目的列表，我们可能只需要渲染当前屏幕可见的 10 个条目。当用户滚动列表时，我们会动态地更新渲染的条目，从而始终保持只渲染可见区域的内容。

3. 虚拟滚动的实现原理

虚拟滚动涉及以下几个关键概念：

可见区域（Viewport）： 用户当前在屏幕上可以看到的区域。
渲染列表（Rendered List）： 实际渲染到 DOM 中的列表项。
缓冲区（Buffer）： 在可见区域的上方和下方预留的一小部分区域，用于平滑滚动体验。
总高度（Total Height）： 整个列表的总高度，用于计算滚动条的位置和渲染列表的偏移量。
滚动位置（Scroll Top）： 滚动条距离顶部的距离，用于确定当前可见的列表项。

实现虚拟滚动的基本步骤如下：

计算总高度： 根据列表项的数量和每个条目的高度，计算出整个列表的总高度。
监听滚动事件： 监听滚动容器的滚动事件，获取当前的滚动位置（scrollTop）。
计算可见区域的起始索引和结束索引： 根据滚动位置、可见区域的高度和每个条目的高度，计算出当前可见的列表项的起始索引和结束索引。
生成渲染列表： 从原始数据中提取出可见区域对应的列表项，并生成渲染列表。
更新渲染列表： 将渲染列表渲染到 DOM 中。
设置容器的内边距： 设置滚动容器的内边距，使其总高度等于整个列表的总高度，从而模拟出完整的滚动条。

4. Vue 中虚拟滚动的实现方法

有多种方法可以在 Vue 中实现虚拟滚动，以下列举几种常用的方法：

使用现成的组件库： 许多 Vue 组件库提供了虚拟滚动组件，例如 vue-virtual-scroll-list、vue-virtual-scroller 和 element-plus 中的 el-table。这些组件库通常已经封装好了虚拟滚动的核心逻辑，使用起来非常方便。
自定义虚拟滚动组件： 如果需要更灵活的控制，或者希望深入了解虚拟滚动的实现原理，可以自己编写虚拟滚动组件。

5. 使用 vue-virtual-scroll-list 组件

vue-virtual-scroll-list 是一个轻量级的 Vue 虚拟滚动组件，使用简单，功能强大。

5.1 安装

npm install vue-virtual-scroll-list

5.2 使用

<template>
  <div class="wrapper" ref="wrapper">
    <virtual-list
      class="scroll-list"
      :data-key="'id'"
      :data-sources="listData"
      :item-size="50"
      :estimate-size="50"
      @scroll="onScroll"
    >
      <template #default="{ item }">
        <div class="item" :style="{ height: '50px' }">
          {{ item.name }} - {{ item.id }}
        </div>
      </template>
    </virtual-list>
  </div>
</template>

<script>
import VirtualList from 'vue-virtual-scroll-list';

export default {
  components: {
    VirtualList,
  },
  data() {
    return {
      listData: [],
    };
  },
  mounted() {
    this.generateData();
  },
  methods: {
    generateData() {
      for (let i = 0; i < 10000; i++) {
        this.listData.push({ id: i, name: `Item ${i}` });
      }
    },
    onScroll(scrollTop) {
      // 可以监听滚动事件，进行一些额外的处理
    },
  },
};
</script>

<style scoped>
.wrapper {
  width: 300px;
  height: 400px;
  overflow-y: auto;
  border: 1px solid #ccc;
}

.scroll-list {
  width: 100%;
  height: 100%;
}

.item {
  display: flex;
  align-items: center;
  padding: 0 10px;
  border-bottom: 1px solid #eee;
}
</style>

5.3 组件属性说明

属性名	类型	默认值	说明
`data-key`	`String`	`'id'`	用于标识每个列表项的唯一键。如果列表项没有唯一的 `id` 属性，可以指定其他属性作为键。
`data-sources`	`Array`	`[]`	列表数据源。
`item-size`	`Number`	`20`	每个列表项的高度，单位为像素。如果列表项的高度是固定的，建议设置此属性，可以提高性能。
`estimate-size`	`Number`	`20`	预估的每个列表项高度，单位为像素。如果列表项的高度不固定，需要设置此属性，用于计算总高度和滚动位置。这个值应该尽可能接近实际的平均高度，以获得更好的滚动体验。如果设置了`item-size`，则`estimate-size`不起作用。

6. 自定义虚拟滚动组件

如果需要更灵活的控制，可以自己编写虚拟滚动组件。以下是一个简单的示例：

<template>
  <div class="virtual-list-container" ref="scrollContainer" @scroll="handleScroll">
    <div class="virtual-list-phantom" :style="{ height: totalHeight + 'px' }"></div>
    <div class="virtual-list-content" :style="{ transform: `translateY(${offsetY}px)` }">
      <div
        class="virtual-list-item"
        v-for="item in visibleData"
        :key="item.id"
        :style="{ height: itemHeight + 'px' }"
      >
        {{ item.name }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    listData: {
      type: Array,
      required: true,
    },
    itemHeight: {
      type: Number,
      default: 50,
    },
    bufferSize: {
      type: Number,
      default: 10, // 缓冲区大小，上下各预留多少个条目
    },
  },
  data() {
    return {
      visibleData: [],
      startIndex: 0,
      endIndex: 0,
      offsetY: 0,
      containerHeight: 0,
    };
  },
  computed: {
    totalHeight() {
      return this.listData.length * this.itemHeight;
    },
  },
  mounted() {
    this.containerHeight = this.$refs.scrollContainer.clientHeight;
    this.updateVisibleData();
  },
  methods: {
    handleScroll() {
      const scrollTop = this.$refs.scrollContainer.scrollTop;
      this.startIndex = Math.max(0, Math.floor(scrollTop / this.itemHeight) - this.bufferSize);
      this.endIndex = Math.min(
        this.listData.length,
        Math.ceil((scrollTop + this.containerHeight) / this.itemHeight) + this.bufferSize
      );
      this.offsetY = this.startIndex * this.itemHeight;
      this.updateVisibleData();
    },
    updateVisibleData() {
      this.visibleData = this.listData.slice(this.startIndex, this.endIndex);
    },
  },
};
</script>

<style scoped>
.virtual-list-container {
  width: 300px;
  height: 400px;
  overflow-y: auto;
  position: relative;
  border: 1px solid #ccc;
}

.virtual-list-phantom {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: -1; /* 确保不遮挡内容 */
}

.virtual-list-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.virtual-list-item {
  display: flex;
  align-items: center;
  padding: 0 10px;
  border-bottom: 1px solid #eee;
  box-sizing: border-box; /* 确保 padding 不影响高度计算 */
}
</style>

6.1 代码解释

virtual-list-container： 滚动容器，设置 overflow-y: auto 使其可以滚动。
virtual-list-phantom： 占位元素，用于撑开滚动条，使其高度等于整个列表的总高度。z-index: -1 确保它不影响其他元素的交互。
virtual-list-content： 内容容器，包含实际渲染的列表项。通过 transform: translateY() 来控制列表项的偏移量，模拟滚动效果。
virtual-list-item： 列表项，显示实际的内容。
bufferSize: 缓冲区域，为了避免快速滚动时出现空白，在可视区域上下增加额外的渲染元素。
通过计算startIndex和endIndex，截取listData中需要渲染的数据。
通过改变offsetY的值，来控制显示区域的数据。

7. 虚拟滚动的性能优势

虚拟滚动的主要性能优势在于：

减少 DOM 节点的数量： 只渲染可见区域内的列表项，大大减少了 DOM 节点的数量，降低了浏览器的渲染负担。
降低内存占用： 减少了需要存储在内存中的 DOM 节点数量，降低了内存占用。
提高渲染速度： 由于只需要渲染可见区域内的列表项，渲染速度大大提高，页面响应更加流畅。
提升用户体验： 用户可以更快地看到列表的内容，滚动体验更加流畅。

8. 虚拟滚动的适用场景

虚拟滚动适用于以下场景：

大型列表： 包含成百上千甚至更多条目的列表。
性能瓶颈： 传统的列表渲染方式导致页面卡顿、响应缓慢。
滚动需求： 需要支持滚动功能的列表。

9. 注意事项和优化技巧

固定高度的列表项： 如果列表项的高度是固定的，可以设置 item-size 属性，可以提高性能。
动态高度的列表项： 如果列表项的高度是动态的，需要使用 estimate-size 属性，并尽可能准确地估计平均高度。
避免不必要的渲染： 尽量避免在滚动事件处理函数中执行复杂的计算或 DOM 操作，以免影响滚动性能。
使用 requestAnimationFrame： 可以使用 requestAnimationFrame 来优化滚动事件处理函数，减少浏览器重绘的次数。
数据缓存： 对于频繁访问的数据，可以使用缓存来提高性能。
图片懒加载： 如果列表项包含图片，可以使用懒加载技术，只在图片进入可见区域时才加载图片。

10. 性能对比

下面是一个简单的性能对比表格，展示了传统列表渲染和虚拟滚动在渲染大型列表时的性能差异：

指标	传统列表渲染	虚拟滚动
DOM 节点数量	大量	少量
内存占用	高	低
初始渲染时间	长	短
滚动流畅度	差	好
CPU 使用率	高	低

11. 使用 Virtualized 库

除了 Vue 相关的库，也可以考虑使用 react-virtualized 这个库，它虽然是为 React 设计的，但其实现思想和算法可以借鉴。

12. 关于键盘支持

需要特别注意的是，虚拟滚动在实现键盘支持（如上下方向键）时，需要额外处理滚动逻辑，确保键盘操作能够正确地导航列表。

13. 关于可访问性

务必考虑可访问性（Accessibility），确保屏幕阅读器等辅助技术能够正确地读取列表内容。可以使用 ARIA 属性来增强列表的可访问性。

总而言之，虚拟滚动是优化大型列表渲染的有效方法。通过只渲染可见区域内的列表项，可以大大减少 DOM 节点的数量，降低内存占用，提高渲染速度，提升用户体验。在实际开发中，可以根据具体需求选择合适的虚拟滚动组件或自定义虚拟滚动组件。

要点回顾： 虚拟滚动核心在于只渲染可视区域，通过计算和动态调整，在大型列表中实现高性能的滚动体验。在 Vue 中，可以选择现成的组件库，或者自定义组件以获得更大的灵活性。

希望今天的分享能够帮助大家更好地理解和应用虚拟滚动技术，提升 Vue 应用的性能。谢谢大家！

更多IT精英技术系列讲座，到智猿学院

Vue 应用中的大型列表渲染优化：虚拟滚动（Virtual Scrolling）的实现与性能优势

发表回复 取消回复

发表回复取消回复