前端如何渲染几千几万条数据而不卡顿?

在 Vue 中渲染成千上万条数据时，直接渲染所有 DOM 节点会导致严重的性能问题（如内存占用高、渲染卡顿）。以下是几种常见的解决方法：

1. 使用虚拟滚动

只渲染可视区域内的元素，动态替换不可见区域的 DOM，极大减少实际渲染节点数。

npm install vue-virtual-scroller

  
    
      
{{ item.text }}
    
  


import { RecycleScroller } from 'vue-virtual-scroller';
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';
export default {
  components: { RecycleScroller },
  data() {
    return {
      bigData: Array.from({ length: 10000 }, (_, i) => ({
        id: i,
        text: `Item ${i}`,
      })),
    };
  },
};


.scroller {
  height: 500px;
}
.item {
  height: 50px;
  padding: 10px;
  border-bottom: 1px solid #eee;
}

2. 数据冻结

通过 Object.freeze 冻结数据，避免 Vue 3 的响应式系统追踪变化，减少内存开销。

Object.freeze() 静态方法可以使一个对象被冻结。冻结对象可以防止扩展，并使现有的属性不可写入和不可配置。

export default {
  data() {
    return {
      bigData: Object.freeze(
        Array.from({ length: 10000 }, (_, i) => ({
          id: i,
          text: `Item ${i}`,
        }))
      ),
    };
  },
};

3. 分片渲染

将数据分割成多个小块，利用浏览器的空闲时间（如 requestAnimationFrame）逐步渲染，避免一次性渲染所有 DOM 节点导致主线程阻塞。

requestAnimationFrame() 方法会告诉浏览器你希望执行一个动画。它要求浏览器在下一次重绘之前，调用用户提供的回调函数。

  

    
    
{{ item.text }}
    
    
加载中...
  


import { ref, onMounted } from 'vue';
export default {
  setup() {
    // 原始数据：1万条
    const allData = ref(
      Array.from({ length: 10000 }, (_, i) => ({
        id: i,
        text: `Item ${i}`,
      }))
    );
    // 当前已渲染的数据
    const visibleData = ref([]);
    // 每次渲染的数据量
    const chunkSize = 100;
    // 当前渲染到的位置
    const currentIndex = ref(0);
    // 是否正在加载
    const isLoading = ref(false);
    // 分片渲染函数
    const renderChunk = () => {
      isLoading.value = true;
      const end = currentIndex.value + chunkSize;
      // 截取下一块数据
      visibleData.value = allData.value.slice(0, end);
      currentIndex.value = end;
      if (end  {
      renderChunk();
    });
    return { visibleData, isLoading };
  },
};

4. 优化 Vue 3 响应式数据

使用 shallowRef 或 shallowReactive：减少深层响应式开销。

import { shallowRef } from 'vue';
export default {
  setup() {
    const bigData = shallowRef(
      Array.from({ length: 10000 }, (_, i) => ({ id: i, text: `Item ${i}` }))
    );
    return { bigData };
  },
};

5. 分页加载

将数据分页加载，每次只渲染当前页的数据。

  

    
{{ item.text }}
    上一页
    下一页
  


export default {
  data() {
    return {
      allData: Array.from({ length: 10000 }, (_, i) => ({ id: i, text: `Item ${i}` })),
      currentPage: 1,
      pageSize: 100,
    };
  },
  computed: {
    currentPageData() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.allData.slice(start, end);
    },
  },
  methods: {
    prevPage() { this.currentPage--; },
    nextPage() { this.currentPage++; },
  },
};