谈谈 Vue 应用中如何进行大列表渲染的性能优化，例如虚拟滚动（Virtual Scroller）。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位老铁，大家好！我是你们的老朋友，今天咱们来聊聊Vue应用里的大列表渲染优化，重点说说虚拟滚动（Virtual Scroller）这玩意儿。保证让你的列表飞起来，不卡顿！

开场白：列表，爱恨交织的小妖精

列表，这玩意儿咱们前端攻城狮天天见，就像每天早上的煎饼果子，必不可少。但当数据量膨胀到成千上万条的时候，它就成了个磨人的小妖精，卡顿、掉帧，用户体验直线下降。这时候，我们就得祭出优化大法，驯服这只小妖精！

第一章：为什么大列表渲染会卡？

先别急着上代码，咱们得先搞明白问题出在哪儿。 Vue渲染列表，默认是把所有数据都渲染到DOM里。数据少的时候，没问题，但数据一多，浏览器就懵逼了。

DOM元素太多： 浏览器渲染DOM是很耗性能的，几百个元素还好，几千几万个，浏览器就得吭哧吭哧地算半天。
内存占用过高： 每个DOM元素都要占用内存，数据量越大，占用的内存就越多，容易导致浏览器崩溃。
渲染时间过长： 浏览器要花很长时间才能把所有DOM元素渲染出来，页面就会出现卡顿。

简单来说，就是浏览器累了，干不动了！

第二章：优化策略，对症下药

既然知道了问题所在，那咱们就来对症下药，看看有哪些优化策略：

分页加载： 这是最简单粗暴的方法，每次只加载一部分数据，用户滚动到页面底部再加载下一页。虽然简单，但用户体验不太好，滚动到后面需要等待加载。
懒加载（Lazy Loading）： 类似于图片懒加载，只渲染可视区域内的数据，当元素进入可视区域时再渲染。这种方法可以减少初始渲染的DOM数量，但滚动过程中仍然会频繁地创建和销毁DOM元素，性能提升有限。
虚拟滚动（Virtual Scroller）： 这才是咱们今天的主角！虚拟滚动只渲染可视区域内的DOM元素，当用户滚动时，动态地更新可视区域内的DOM元素，而不是创建和销毁DOM元素。这样就可以大大减少DOM元素的数量，提高渲染性能。
数据优化： 优化数据结构，避免不必要的计算。例如，如果列表中的数据需要进行格式化，可以在数据加载时进行格式化，而不是在渲染时进行格式化。

优化策略	优点	缺点	适用场景
分页加载	实现简单，易于理解	用户体验较差，滚动到后面需要等待加载	数据量非常大，用户不太可能一次性浏览所有数据
懒加载	减少初始渲染的DOM数量	滚动过程中仍然会频繁地创建和销毁DOM元素，性能提升有限	数据量较大，但用户可能会浏览到列表的任何位置
虚拟滚动	极大地减少DOM元素的数量，提高渲染性能	实现相对复杂，需要精确计算可视区域和滚动位置	数据量非常大，需要高性能的滚动体验
数据优化	减少不必要的计算，提高渲染性能	需要对数据结构进行优化，可能增加代码复杂度	所有列表渲染场景，特别是数据需要进行格式化或计算的场景

第三章：虚拟滚动，Show me the code!

光说不练假把式，咱们来撸起袖子，用代码实现一个简单的虚拟滚动。

核心思想：

计算可视区域的高度。
计算总共有多少条数据。
计算滚动条滚动的高度。
根据滚动高度和可视区域高度，计算出当前需要渲染的数据的起始索引和结束索引。
只渲染可视区域内的数据。
使用transform: translateY() 属性来模拟滚动效果。

代码示例：

<template>
  <div class="list-container" ref="listContainer" @scroll="handleScroll">
    <div class="list-wrapper" :style="{ height: listHeight + 'px' }">
      <div
        class="list-item"
        v-for="item in visibleData"
        :key="item.id"
        :style="{ transform: `translateY(${item.top}px)` }"
      >
        {{ item.text }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      listData: [], // 原始数据
      visibleData: [], // 可视区域内的数据
      itemHeight: 50, // 每一项的高度
      visibleCount: 20, // 可视区域内显示的条数
      listHeight: 0, // 列表的总高度
      startIndex: 0, // 起始索引
      endIndex: 0, // 结束索引
    };
  },
  mounted() {
    // 模拟大量数据
    for (let i = 0; i < 10000; i++) {
      this.listData.push({ id: i, text: `Item ${i}` });
    }

    this.listHeight = this.listData.length * this.itemHeight;
    this.calculateVisibleData();
  },
  methods: {
    handleScroll() {
      const scrollTop = this.$refs.listContainer.scrollTop;
      this.startIndex = Math.floor(scrollTop / this.itemHeight);
      this.endIndex = this.startIndex + this.visibleCount;
      this.calculateVisibleData();
    },
    calculateVisibleData() {
      this.visibleData = this.listData.slice(this.startIndex, this.endIndex).map((item, index) => {
        return {
          ...item,
          top: (this.startIndex + index) * this.itemHeight,
        };
      });
    },
  },
};
</script>

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

.list-wrapper {
  position: relative;
}

.list-item {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border-bottom: 1px solid #eee;
}
</style>

代码解释：

list-container： 容器，设置高度和overflow-y: auto，使其可以滚动。
list-wrapper： 包装器，设置总高度，撑开滚动条。
list-item： 列表项，使用position: absolute和transform: translateY()来定位，模拟滚动效果。
listData： 原始数据，模拟10000条数据。
visibleData： 可视区域内的数据，根据滚动位置动态计算。
itemHeight： 每一项的高度。
visibleCount： 可视区域内显示的条数。
listHeight： 列表的总高度。
startIndex： 起始索引。
endIndex： 结束索引。
handleScroll： 滚动事件处理函数，计算起始索引和结束索引，更新可视区域内的数据。
calculateVisibleData： 计算可视区域内的数据，并设置每个列表项的top值。

第四章：更上一层楼，优化细节

上面的代码只是一个简单的示例，实际应用中还需要考虑一些优化细节：

防抖（Debounce）： 滚动事件触发频率很高，可以使用防抖来减少handleScroll函数的调用次数。

import { debounce } from 'lodash'; // 需要安装lodash

export default {
  mounted() {
    this.handleScroll = debounce(this.handleScroll, 50);
  },
  // ... 其他代码
};

缓存： 可以缓存计算结果，避免重复计算。例如，可以缓存每个列表项的top值，下次渲染时直接使用缓存的值。
性能分析： 使用浏览器的性能分析工具来分析性能瓶颈，针对性地进行优化。

使用requestAnimationFrame: 将更新DOM的操作放入requestAnimationFrame回调中，利用浏览器的优化机制，避免卡顿。

handleScroll() {
    const scrollTop = this.$refs.listContainer.scrollTop;
    this.startIndex = Math.floor(scrollTop / this.itemHeight);
    this.endIndex = this.startIndex + this.visibleCount;

    requestAnimationFrame(() => {
        this.calculateVisibleData();
    });
},

Immutable Data: 如果你的数据是不可变的，可以使用 Immutable Data 库来提高性能。 Immutable Data 可以避免不必要的DOM更新，从而提高渲染性能。

第五章：轮子真香，第三方组件

不想自己造轮子？没问题，Vue社区有很多优秀的虚拟滚动组件，可以直接拿来用。

vue-virtual-scroller： 功能强大，支持多种滚动模式，例如列表、表格、树形结构等。

npm install vue-virtual-scroller

<template>
  <RecycleScroller
    class="virtual-list"
    :items="listData"
    :item-size="itemHeight"
    key-field="id"
  >
    <template v-slot="{ item }">
      <div class="list-item" :style="{ height: itemHeight + 'px' }">
        {{ item.text }}
      </div>
    </template>
  </RecycleScroller>
</template>

<script>
import { RecycleScroller } from 'vue-virtual-scroller';
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';

export default {
  components: {
    RecycleScroller,
  },
  data() {
    return {
      listData: [],
      itemHeight: 50,
    };
  },
  mounted() {
    for (let i = 0; i < 10000; i++) {
      this.listData.push({ id: i, text: `Item ${i}` });
    }
  },
};
</script>

<style scoped>
.virtual-list {
  width: 300px;
  height: 400px;
  border: 1px solid #ccc;
}

.list-item {
  line-height: 50px;
  text-align: center;
  border-bottom: 1px solid #eee;
}
</style>

vue-virtual-scroll-list： 简单易用，专注于列表滚动。
vue-infinite-loading： 支持无限滚动，可以自动加载下一页数据。

这些组件都经过了大量的测试和优化，性能和稳定性都有保障。

第六章：总结，驯服列表小妖精

今天咱们聊了Vue应用中大列表渲染的优化策略，重点介绍了虚拟滚动。虚拟滚动通过只渲染可视区域内的DOM元素，大大减少了DOM元素的数量，提高了渲染性能。

理解问题： 搞清楚大列表渲染卡顿的原因。
选择策略： 根据实际情况选择合适的优化策略。
撸起袖子： 自己实现虚拟滚动，或者使用第三方组件。
优化细节： 考虑防抖、缓存等优化细节。
性能分析： 使用性能分析工具来分析性能瓶颈，针对性地进行优化。

记住，没有银弹，只有适合你的解决方案。驯服列表小妖精，让你的应用飞起来！

彩蛋：一些思考

不仅仅是列表： 虚拟滚动的思想可以应用到其他场景，例如表格、树形结构等。
性能不是一切： 在追求性能的同时，也要考虑代码的可维护性和可读性。
持续学习： 前端技术日新月异，要保持学习的热情，不断探索新的优化方法。

好了，今天的讲座就到这里，希望对大家有所帮助！祝大家写出高性能的Vue应用！咱们下次再见！

发表回复 取消回复

发表回复取消回复