前端如何处理后端一次性返回10万条数据？---02

该方法和前面方法大致相同，主要通过分页加载、虚拟滚动和数据缓存

1. 后端数据处理

首先，确保后端在传输数据时是经过压缩的，可以大大减少传输的数据量。常见的压缩方式有Gzip或Brotli。

// 例如，在Node.js中使用compression中间件
const compression = require('compression');
const express = require('express');
const app = express();

app.use(compression());

2. 前端数据处理

分页加载

分页加载是最常用的方法之一，通过每次只加载一部分数据，可以有效减少浏览器的内存压力和渲染时间。

后端分页接口

后端需要提供分页接口，每次只返回一部分数据。

// 例如，在Express中实现分页接口
app.get('/data', (req, res) => {
    const page = parseInt(req.query.page) || 1;
    const pageSize = parseInt(req.query.pageSize) || 100;
    const data = getData(); // 获取所有数据的函数
    const paginatedData = data.slice((page - 1) * pageSize, page * pageSize);
    res.json(paginatedData);
});

前端分页实现

在Vue项目中，使用axios进行数据请求，并实现分页加载。

<template>
  <div>
    <table>
      <tr v-for="item in items" :key="item.id">
        <td>{{ item.name }}</td>
        <td>{{ item.value }}</td>
      </tr>
    </table>
    <button @click="loadMore">加载更多</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      items: [],
      page: 1,
      pageSize: 100
    };
  },
  methods: {
    loadMore() {
      axios.get('/data', {
        params: {
          page: this.page,
          pageSize: this.pageSize
        }
      }).then(response => {
        this.items = [...this.items, ...response.data];
        this.page++;
      });
    }
  },
  mounted() {
    this.loadMore();
  }
};
</script>

虚拟滚动

对于需要一次性展示大量数据的场景，虚拟滚动（Virtual Scrolling）是一种高效的解决方案。虚拟滚动技术只渲染可视区域的数据，其他不可见的部分不进行渲染，从而提高渲染性能。

使用Vue的第三方库，如vue-virtual-scroll-list，可以轻松实现虚拟滚动。

安装依赖

npm install vue-virtual-scroll-list

实现虚拟滚动

<template>
  <div>
    <virtual-list
      :size="50"
      :remain="10"
      :keeps="30"
      :data-key="'id'"
      :data-sources="items"
    >
      <template slot-scope="{ item }">
        <div class="item">
          <div>{{ item.name }}</div>
          <div>{{ item.value }}</div>
        </div>
      </template>
    </virtual-list>
  </div>
</template>

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

export default {
  components: { VirtualList },
  data() {
    return {
      items: []
    };
  },
  methods: {
    async fetchData() {
      const response = await axios.get('/data');
      this.items = response.data;
    }
  },
  mounted() {
    this.fetchData();
  }
};
</script>

<style>
.item {
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>

3. 数据缓存

为了减少多次请求的数据开销，可以使用浏览器的缓存技术，例如localStorage、sessionStorage或IndexedDB来缓存已经加载的数据。

// 存储数据到localStorage
localStorage.setItem('data', JSON.stringify(data));

// 从localStorage读取数据
const cachedData = JSON.parse(localStorage.getItem('data'));
if (cachedData) {
  this.items = cachedData;
} else {
  this.fetchData();
}