vue长列表数据渲染优化：滚动加载，只创建可见部分dom元素

2023-01-17 03:06:15

优化 Vue 长列表数据渲染：滚动加载和按需创建 DOM

前言

在当今快节奏的数字世界中，用户对流畅、无缝的在线体验的期望值很高。这尤其适用于涉及展示大量数据的 Web 应用程序。然而，当数据量过大时，Vue 应用程序中可能出现页面卡顿和性能问题。这是因为 Vue 在页面加载时需要一次性创建所有 DOM 元素，这会导致资源密集型操作，会消耗大量时间和内存。

滚动加载：渐进式 DOM 创建

解决此问题的关键方法之一是采用滚动加载 技术。与一次性加载所有数据不同，滚动加载在用户滚动到相应位置时才加载和创建数据。这允许页面在加载时仅创建必要的 DOM 元素，从而显著降低了页面卡顿的风险。

在 Vue 中，可以使用 $nextTick() 方法实现滚动加载。该方法会在下一个 DOM 更新循环后执行，因此可以将 DOM 元素的创建操作封装在 $nextTick() 中。这样，DOM 元素仅在页面加载完成后创建，从而避免了潜在的卡顿。

按需创建 DOM：只渲染可见元素

除了滚动加载之外，还可以使用按需创建 DOM 技术进一步优化渲染性能。此技术通过仅创建用户当前视口中可见的 DOM 元素来减少需要创建的元素数量。

Vue 提供了 Intersection Observer API ，该 API 可以监听元素是否进入或离开视口。利用此 API，我们可以确定哪些 DOM 元素需要创建。

代码示例

以下代码示例展示了如何将滚动加载和按需创建 DOM 技术结合到 Vue 应用程序中：

<template>
  <div class="container">
    <ul>
      <li v-for="item in items" v-if="item.isVisible">{{ item.content }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [],
    };
  },
  mounted() {
    this.initIntersectionObserver();
    this.loadMoreItems();
  },
  methods: {
    initIntersectionObserver() {
      const options = {
        root: document.querySelector('.container'),
        threshold: 0.5,
      };
      const observer = new IntersectionObserver(this.handleIntersection, options);
      observer.observe(document.querySelector('ul'));
    },
    handleIntersection(entries) {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          this.loadMoreItems();
        }
      });
    },
    loadMoreItems() {
      // 从服务器获取更多数据
      const newItems = [];
      for (let i = 0; i < 10; i++) {
        newItems.push({
          content: `Item ${this.items.length + i + 1}`,
          isVisible: false,
        });
      }
      this.items.push(...newItems);
      this.$nextTick(() => {
        this.items.forEach((item) => {
          if (item.isVisible === false) {
            item.isVisible = true;
          }
        });
      });
    },
  },
};
</script>