发布于 由admin

如何针对 Vue 列表页的性能瓶颈（如万级数据渲染），设计并实现虚拟滚动（Virtual Scrolling）方案？

各位靓仔靓女，大家好！我是你们的老朋友，今天咱们来聊聊Vue列表的性能优化，特别是面对万级数据时如何优雅地使用虚拟滚动。

一、开场白：别让你的列表卡成PPT

想象一下，你辛辛苦苦写了一个Vue应用，信心满满地准备上线，结果发现列表一加载，浏览器就卡得像PPT一样。用户体验直接降到冰点！罪魁祸首往往就是大量数据的渲染。

传统的渲染方式，会把所有数据一股脑儿地塞进DOM里，浏览器得花大量时间去绘制这些看不见摸不着的元素。万级数据，甚至十万级数据，直接让浏览器原地爆炸。

这时候，虚拟滚动就该闪亮登场了！

二、什么是虚拟滚动？（Virtual Scrolling）

虚拟滚动，也叫虚拟列表。它的核心思想是：只渲染可见区域的数据，而不是渲染整个列表。

简单来说，就是我们只显示用户能看到的那部分数据，其他部分的数据暂时不渲染。当用户滚动时，我们动态地更新可见区域的数据，让用户感觉好像整个列表都被渲染了，但实际上我们只渲染了一小部分。

就像看电影一样，我们只看到屏幕上的内容，但电影院里其实还有很多我们看不到的地方（比如放映机、音响等等）。

三、虚拟滚动的实现原理

虚拟滚动的实现主要涉及到以下几个关键因素：

  • 可见区域高度 (viewportHeight): 列表容器的高度，也就是用户能看到的区域的高度。
  • 列表总高度 (scrollHeight): 整个列表的理论高度，也就是如果所有数据都渲染出来，列表应该有多高。
  • 滚动位置 (scrollTop): 滚动条距离顶部的距离。
  • 单项高度 (itemHeight): 列表中每个Item的高度（通常是固定的，当然也可以动态计算）。
  • 起始索引 (startIndex): 可见区域内第一个Item在整个列表中的索引。
  • 结束索引 (endIndex): 可见区域内最后一个Item在整个列表中的索引。
  • 渲染数据 (visibleData): 需要渲染到可见区域的数据。
  • 偏移量 (offset): 可见区域开始位置相对于整个列表的偏移量，用于撑开滚动条。

用公式表达：

  • startIndex = Math.floor(scrollTop / itemHeight)
  • endIndex = Math.min(startIndex + visibleCount, listData.length) (其中 visibleCount = Math.ceil(viewportHeight / itemHeight) 是屏幕能显示的item数量)
  • visibleData = listData.slice(startIndex, endIndex)
  • offset = startIndex * itemHeight

四、Vue中实现虚拟滚动：代码实战

接下来，我们就用Vue来实现一个简单的虚拟滚动列表。

1. 基础结构

首先，我们创建一个Vue组件，包含一个列表容器，用于展示数据：

<template>
  <div class="virtual-list-container"
       ref="scrollContainer"
       @scroll="handleScroll"
       :style="{ height: viewportHeight + 'px' }">
    <div class="virtual-list-phantom"
         :style="{ height: scrollHeight + 'px' }"></div>
    <div class="virtual-list-content"
         :style="{ transform: 'translateY(' + offset + '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 {
  data() {
    return {
      listData: [], // 原始数据
      visibleData: [], // 渲染的数据
      viewportHeight: 600, // 可见区域高度
      itemHeight: 30, // 单个Item高度
      startIndex: 0, // 起始索引
      endIndex: 0, // 结束索引
      offset: 0, // 偏移量
      scrollHeight: 0, // 列表总高度
    };
  },
  mounted() {
    // 模拟获取大量数据
    this.listData = Array.from({ length: 10000 }, (_, i) => ({ id: i, name: `Item ${i}` }));
    this.scrollHeight = this.listData.length * this.itemHeight;
    this.updateVisibleData();
  },
  methods: {
    handleScroll() {
      const scrollTop = this.$refs.scrollContainer.scrollTop;
      this.startIndex = Math.floor(scrollTop / this.itemHeight);
      const visibleCount = Math.ceil(this.viewportHeight / this.itemHeight);
      this.endIndex = Math.min(this.startIndex + visibleCount, this.listData.length);
      this.offset = this.startIndex * this.itemHeight;
      this.updateVisibleData();
    },
    updateVisibleData() {
      this.visibleData = this.listData.slice(this.startIndex, this.endIndex);
    },
  },
};
</script>

<style scoped>
.virtual-list-container {
  position: relative;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch; /* 启用惯性滚动 */
}

.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 {
  padding: 10px;
  border-bottom: 1px solid #eee;
  box-sizing: border-box; /* 包含padding和border */
}
</style>

代码解释：

  • virtual-list-container: 列表容器，设置了 overflow-y: scroll，使其可以滚动。viewportHeight 控制了可见区域的高度。
  • virtual-list-phantom: 占位元素，用于撑开滚动条，使其看起来像整个列表都渲染了。scrollHeight 控制了占位元素的高度。
  • virtual-list-content: 实际渲染内容的容器。通过 transform: translateY(offset) 来控制内容的位置，模拟滚动效果。
  • virtual-list-item: 列表项，itemHeight 控制了每个Item的高度。
  • handleScroll 函数在滚动时触发，计算 startIndex、endIndex 和 offset，然后更新 visibleData。
  • updateVisibleData 函数根据 startIndex 和 endIndex 从原始数据中截取需要渲染的数据。
  • -webkit-overflow-scrolling: touch; 在iOS设备上启用惯性滚动，提升滚动体验。

2. 关键点解析

  • scrollTop的获取： 使用this.$refs.scrollContainer.scrollTop获取滚动条位置。
  • offset的作用： offset用于调整virtual-list-content的位置，使得可见区域的数据始终显示在正确的位置。如果没有offset，滚动后列表会从顶部开始显示，而不是从滚动条的位置开始显示。
  • virtual-list-phantom的作用： 这个元素是虚拟滚动中非常重要的一个组成部分。它的作用是撑开滚动条，让滚动条的长度和整个列表的长度一致。如果没有这个元素，滚动条的长度会很短，用户无法通过滚动条来快速浏览整个列表。
  • 性能优化： visibleData只包含需要渲染的数据，大大减少了DOM元素的数量，提高了渲染性能。

五、高级用法：动态高度Item的处理

上面的例子中，我们假设每个Item的高度都是固定的。但实际情况中，Item的高度可能是不固定的，比如Item的内容长度不确定，导致Item的高度也不同。

对于动态高度的Item，我们需要做一些额外的处理：

  1. 预估高度： 在初始化时，我们可以先预估一个平均高度，用于计算 scrollHeight 和 startIndex、endIndex。
  2. 记录实际高度： 在Item渲染后，我们需要记录每个Item的实际高度。
  3. 动态计算： 在滚动时，我们需要根据Item的实际高度来动态计算 startIndex、endIndex 和 offset。

以下是一个简单的示例代码：

<template>
  <div class="virtual-list-container"
       ref="scrollContainer"
       @scroll="handleScroll"
       :style="{ height: viewportHeight + 'px' }">
    <div class="virtual-list-phantom"
         :style="{ height: scrollHeight + 'px' }"></div>
    <div class="virtual-list-content"
         :style="{ transform: 'translateY(' + offset + 'px)' }">
      <div class="virtual-list-item"
           v-for="item in visibleData"
           :key="item.id"
           :ref="setItemRef(item.id)"
           @load="handleItemLoad(item.id)"
           :style="{ height: itemHeights[item.id] ? itemHeights[item.id] + 'px' : 'auto' }">
        {{ item.content }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      listData: [],
      visibleData: [],
      viewportHeight: 600,
      estimatedItemHeight: 50, // 预估高度
      itemHeights: {}, // 记录Item的实际高度
      startIndex: 0,
      endIndex: 0,
      offset: 0,
      scrollHeight: 0,
    };
  },
  mounted() {
    this.listData = Array.from({ length: 1000 }, (_, i) => ({ id: i, content: `Item ${i}: ${this.generateRandomText()}` }));
    this.scrollHeight = this.listData.length * this.estimatedItemHeight;
    this.updateVisibleData();
  },
  methods: {
    generateRandomText() {
      const length = Math.floor(Math.random() * 100) + 20; // 随机生成20-120个字符
      return Array.from({ length }, () => String.fromCharCode(Math.floor(Math.random() * 26) + 97)).join(''); // 生成随机小写字母
    },
    setItemRef(id) {
      return (el) => {
        if (el) {
          if (!this.$refs.itemRefs) {
            this.$refs.itemRefs = {};
          }
          this.$refs.itemRefs[id] = el;
        }
      };
    },
    handleItemLoad(id) {
      if (this.$refs.itemRefs && this.$refs.itemRefs[id]) {
        const height = this.$refs.itemRefs[id].offsetHeight;
        if (this.itemHeights[id] !== height) {
          this.$set(this.itemHeights, id, height); // 使用 $set 确保响应式更新
          this.calculateScrollHeight();
          this.updateVisibleData();
        }
      }
    },
    handleScroll() {
      const scrollTop = this.$refs.scrollContainer.scrollTop;
      let startIndex = 0;
      let accumulatedHeight = 0;

      // 找到第一个超出scrollTop的Item的索引
      for (let i = 0; i < this.listData.length; i++) {
        accumulatedHeight += this.itemHeights[i] || this.estimatedItemHeight;
        if (accumulatedHeight >= scrollTop) {
          startIndex = i;
          break;
        }
      }
      this.startIndex = startIndex;

      let visibleCount = 0;
      let currentHeight = 0;
      for(let i = startIndex; i < this.listData.length; i++){
          currentHeight += this.itemHeights[i] || this.estimatedItemHeight;
          if(currentHeight >= this.viewportHeight){
              visibleCount = i - startIndex + 1;
              break;
          }
      }

      this.endIndex = Math.min(startIndex + visibleCount, this.listData.length);

      this.offset = this.calculateOffset();
      this.updateVisibleData();
    },

    calculateOffset() {
      let offset = 0;
      for (let i = 0; i < this.startIndex; i++) {
        offset += this.itemHeights[i] || this.estimatedItemHeight;
      }
      return offset;
    },

    calculateScrollHeight() {
      let scrollHeight = 0;
      for (let i = 0; i < this.listData.length; i++) {
        scrollHeight += this.itemHeights[i] || this.estimatedItemHeight;
      }
      this.scrollHeight = scrollHeight;
    },

    updateVisibleData() {
      this.visibleData = this.listData.slice(this.startIndex, this.endIndex);
    },
  },
};
</script>

<style scoped>
.virtual-list-container {
  position: relative;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

.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 {
  padding: 10px;
  border-bottom: 1px solid #eee;
  box-sizing: border-box;
  word-break: break-word; /* 防止内容溢出 */
}
</style>

代码解释：

  • estimatedItemHeight: 预估的Item高度。
  • itemHeights: 一个对象，用于存储每个Item的实际高度。key是Item的id，value是Item的高度。
  • setItemRef: 使用 ref 的回调函数，动态地获取每个Item的DOM元素。
  • handleItemLoad: 在Item加载完成后触发，获取Item的实际高度，并更新 itemHeights。
  • handleScroll: 滚动事件处理函数，需要根据 itemHeights 动态计算 startIndex、endIndex 和 offset。 这里使用了循环来查找startIndex，效率不如固定高度的算法，但能应付动态高度的情况。
  • calculateOffset 和 calculateScrollHeight: 这两个函数也需要根据 itemHeights 动态计算 offset 和 scrollHeight。
  • word-break: break-word;： 在CSS中添加 word-break: break-word; 可以防止内容溢出，确保Item的高度能够正确计算。
  • $set： 使用this.$set(this.itemHeights, id, height); 来更新itemHeights对象，确保Vue能够检测到数据的变化，并触发视图的更新。这是因为直接修改对象属性可能不会触发Vue的响应式更新。

六、性能优化：进阶技巧

除了基本的虚拟滚动实现，我们还可以使用一些进阶技巧来进一步优化性能：

  • 节流 (Throttle) 和防抖 (Debounce)： 滚动事件触发频率很高，可以使用节流或防抖来限制 handleScroll 函数的执行频率。
  • Intersection Observer API： 使用 Intersection Observer API 来判断Item是否进入可视区域，可以更精确地控制Item的渲染和卸载。
  • 缓存： 对于已经渲染过的Item，可以将其缓存起来，避免重复渲染。
  • 服务端渲染 (SSR)： 在服务端渲染时，可以先渲染一部分数据，然后逐步加载剩余的数据，提高首屏加载速度。
  • 使用成熟的虚拟滚动库： 比如 vue-virtual-scroller、vue-virtual-scroll-list 等，这些库已经封装了虚拟滚动的各种细节，使用起来更加方便。

七、表格总结：

特性 描述
可见区域渲染 只渲染用户可见的部分数据，而不是整个列表。
占位元素 使用占位元素撑开滚动条，模拟整个列表的高度。
动态计算 对于动态高度的Item，需要动态计算 startIndex、endIndex 和 offset。
节流/防抖 限制滚动事件处理函数的执行频率。
IntersectionObserver 使用 Intersection Observer API 来判断Item是否进入可视区域。
缓存 缓存已经渲染过的Item，避免重复渲染。
SSR 在服务端渲染时，先渲染一部分数据，然后逐步加载剩余的数据。
现有库 可以使用 vue-virtual-scroller、vue-virtual-scroll-list 等成熟的虚拟滚动库。

八、踩坑指南：常见问题与解决方案

  • 滚动条跳动： 可能是因为Item的高度计算不准确，导致滚动条的位置计算错误。
    • 解决方案： 确保Item的高度计算准确，可以使用 offsetHeight 或 getBoundingClientRect 获取Item的实际高度。
  • 白屏： 可能是因为 startIndex 和 endIndex 计算错误，导致没有数据被渲染。
    • 解决方案： 检查 startIndex 和 endIndex 的计算逻辑，确保它们在正确的范围内。
  • 性能问题： 即使使用了虚拟滚动，如果Item的渲染逻辑过于复杂，仍然可能出现性能问题。
    • 解决方案： 优化Item的渲染逻辑，避免不必要的计算和DOM操作。

九、总结：让你的列表飞起来！

虚拟滚动是解决Vue列表性能瓶颈的有效方法。通过只渲染可见区域的数据，我们可以大大减少DOM元素的数量，提高渲染性能，让列表飞起来！

希望今天的讲座能帮助大家更好地理解和应用虚拟滚动技术。记住，优化无止境，不断学习和实践才能写出更高效、更优雅的代码！

下次再见！

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注