前端如何處理后端一次性返回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(); }
浙公網安備 33010602011771號