前端如何处理后端一次性返回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. 数据缓存

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

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

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

 

posted @   最小生成树  阅读(112)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
点击右上角即可分享
微信分享提示