当前位置：首页 > web >正文

后端一次性返回十万条数据时，前端需要采用多种性能优化策略来避免页面卡顿

web 2025/9/4 8:00:32

当后端一次性返回十万条数据时，前端需要采用多种性能优化策略来避免页面卡顿。以下是主要的优化方案：

分页加载 - 将数据分批次加载显示
虚拟滚动 - 只渲染可视区域内的数据
数据懒加载 - 按需加载数据
Web Workers - 在后台线程处理数据
时间切片 - 分散渲染任务避免阻塞主线程

下面是具体的实现代码：

<template><div class="large-data-view"><h2>大数据量处理示例</h2><!-- 性能监控 --><div class="performance-info"><span>总数据量: {{ totalDataCount }}</span><span>当前显示: {{ startIndex + 1 }} - {{ Math.min(startIndex + pageSize, totalDataCount) }}</span><span>渲染耗时: {{ renderTime }}ms</span></div><!-- 分页控件 --><div class="pagination-controls"><button @click="prevPage" :disabled="currentPage <= 1">上一页</button><span>第 {{ currentPage }} 页，共 {{ totalPages }} 页</span><button @click="nextPage" :disabled="currentPage >= totalPages">下一页</button><select v-model="pageSize" @change="onPageSizeChange"><option value="50">每页50条</option><option value="100">每页100条</option><option value="200">每页200条</option><option value="500">每页500条</option></select></div><!-- 虚拟滚动列表 --><div class="virtual-scroll-container" ref="scrollContainer" @scroll="onScroll"><div class="scroll-placeholder" :style="{ height: totalHeight + 'px' }"></div><div class="visible-items" :style="{ transform: `translateY(${offsetY}px)` }"><div class="data-item" v-for="item in visibleItems" :key="item.id":style="{ height: itemHeight + 'px' }"><span class="item-index">{{ item.id }}</span><span class="item-name">{{ item.name }}</span><span class="item-value">{{ item.value }}</span><span class="item-time">{{ formatTime(item.timestamp) }}</span></div></div></div><!-- 加载指示器 --><div v-if="loading" class="loading-indicator">数据加载中...</div></div>
</template><script setup lang="ts">
import { ref, computed, onMounted, nextTick } from 'vue';// 响应式数据
const allData = ref<any[]>([]);
const startIndex = ref(0);
const pageSize = ref(100);
const itemHeight = 50; // 每项高度
const loading = ref(false);
const renderTime = ref(0);
const scrollContainer = ref<HTMLElement | null>(null);// 分页相关数据
const currentPage = computed(() => Math.floor(startIndex.value / pageSize.value) + 1);
const totalPages = computed(() => Math.ceil(allData.value.length / pageSize.value));
const totalDataCount = computed(() => allData.value.length);// 虚拟滚动相关数据
const visibleCount = ref(15); // 可视区域项目数
const scrollTop = ref(0);
const offsetY = ref(0);
const totalHeight = computed(() => allData.value.length * itemHeight);// 可视区域的数据
const visibleItems = computed(() => {const start = Math.max(0, Math.floor(scrollTop.value / itemHeight));const end = Math.min(allData.value.length, start + visibleCount.value);return allData.value.slice(start, end);
});// 方法
const formatTime = (timestamp: number) => {const date = new Date(timestamp);return date.toLocaleTimeString();
};// 分页方法
const prevPage = () => {if (currentPage.value > 1) {startIndex.value = (currentPage.value - 2) * pageSize.value;scrollToTop();}
};const nextPage = () => {if (currentPage.value < totalPages.value) {startIndex.value = currentPage.value * pageSize.value;scrollToTop();}
};const onPageSizeChange = () => {startIndex.value = 0;scrollToTop();
};const scrollToTop = () => {if (scrollContainer.value) {scrollContainer.value.scrollTop = 0;}
};// 虚拟滚动处理
const onScroll = () => {if (scrollContainer.value) {scrollTop.value = scrollContainer.value.scrollTop;offsetY.value = Math.floor(scrollTop.value / itemHeight) * itemHeight;}
};// 模拟加载大数据
const loadData = async () => {loading.value = true;const startTime = performance.now();try {// 模拟从后端获取10万条数据// 实际项目中这里应该是API调用const data = generateLargeData(100000);allData.value = data;// 使用时间切片技术处理数据渲染await nextTick();const endTime = performance.now();renderTime.value = Math.round(endTime - startTime);} finally {loading.value = false;}
};// 生成模拟数据
const generateLargeData = (count: number) => {const data = [];for (let i = 0; i < count; i++) {data.push({id: i + 1,name: `数据项 ${i + 1}`,value: Math.random() * 1000,timestamp: Date.now() - Math.floor(Math.random() * 10000000)});}return data;
};// 初始化
onMounted(() => {loadData();// 计算可视区域能显示的项目数if (scrollContainer.value) {visibleCount.value = Math.ceil(scrollContainer.value.clientHeight / itemHeight) + 5;}
});
</script><style scoped>
.large-data-view {height: 100%;display: flex;flex-direction: column;padding: 20px;
}.performance-info {display: flex;gap: 20px;margin-bottom: 20px;padding: 10px;background-color: #f5f5f5;border-radius: 4px;
}.pagination-controls {display: flex;justify-content: space-between;align-items: center;margin-bottom: 20px;padding: 10px;background-color: #f9f9f9;border-radius: 4px;
}.pagination-controls button {padding: 6px 12px;background-color: #007bff;color: white;border: none;border-radius: 4px;cursor: pointer;
}.pagination-controls button:disabled {background-color: #ccc;cursor: not-allowed;
}.pagination-controls select {padding: 6px;border: 1px solid #ddd;border-radius: 4px;
}.virtual-scroll-container {flex: 1;border: 1px solid #ddd;border-radius: 4px;overflow: auto;position: relative;
}.scroll-placeholder {position: absolute;left: 0;top: 0;right: 0;z-index: -1;
}.visible-items {position: absolute;left: 0;right: 0;top: 0;z-index: 1;
}.data-item {display: flex;align-items: center;padding: 0 15px;border-bottom: 1px solid #eee;
}.item-index {width: 80px;font-weight: bold;
}.item-name {flex: 1;
}.item-value {width: 120px;text-align: right;
}.item-time {width: 100px;text-align: right;color: #999;font-size: 0.9em;
}.loading-indicator {position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);padding: 20px;background-color: rgba(0, 0, 0, 0.8);color: white;border-radius: 4px;z-index: 1000;
}
</style>

/*** 大数据处理工具类* 使用Web Workers和时间切片技术处理大量数据*/// 时间切片处理大数据
export class DataProcessor {private chunkSize: number;constructor(chunkSize: number = 1000) {this.chunkSize = chunkSize;}/*** 分块处理大数据数组* @param data 大数据数组* @param processor 处理函数* @returns Promise*/async processInChunks<T, R>(data: T[], processor: (item: T) => R): Promise<R[]> {const results: R[] = [];const totalChunks = Math.ceil(data.length / this.chunkSize);for (let i = 0; i < totalChunks; i++) {const start = i * this.chunkSize;const end = Math.min(start + this.chunkSize, data.length);const chunk = data.slice(start, end);// 处理当前块const chunkResults = chunk.map(processor);results.push(...chunkResults);// 让出控制权，避免阻塞UIif (i < totalChunks - 1) {await this.yieldToMain();}}return results;}/*** 让出控制权给主线程*/private yieldToMain(): Promise<void> {return new Promise(resolve => {setTimeout(resolve, 0);});}/*** 使用Web Worker处理数据* @param data 数据* @param workerFunction 处理函数字符串* @returns Promise*/processWithWorker<T, R>(data: T[], workerFunction: string): Promise<R[]> {return new Promise((resolve, reject) => {// 创建Web Workerconst workerCode = `self.onmessage = function(e) {const { data, processor } = e.data;const func = new Function('return ' + processor)();const results = data.map(func);self.postMessage(results);};`;const blob = new Blob([workerCode], { type: 'application/javascript' });const worker = new Worker(URL.createObjectURL(blob));worker.onmessage = function(e) {resolve(e.data);worker.terminate();};worker.onerror = function(error) {reject(error);worker.terminate();};worker.postMessage({data,processor: workerFunction});});}
}// 创建数据处理器实例
export const dataProcessor = new DataProcessor(1000);

<template><div class="infinite-scroll-list" ref="container"><div class="list-container"><div class="list-item" v-for="item in displayItems" :key="item.id"><slot :item="item"></slot></div><div v-if="loading" class="loading-more">加载中...</div><div v-if="noMore" class="no-more">没有更多数据了</div></div></div>
</template><script setup lang="ts">
import { ref, computed, onMounted, onBeforeUnmount } from 'vue';const props = defineProps<{items: any[];pageSize?: number;threshold?: number; // 距离底部多少像素时触发加载
}>();const emit = defineEmits<{(e: 'loadMore'): void;
}>();// 默认值
const pageSize = props.pageSize || 50;
const threshold = props.threshold || 100;// 响应式数据
const container = ref<HTMLElement | null>(null);
const displayedCount = ref(pageSize);
const loading = ref(false);
const noMore = ref(false);// 计算属性
const displayItems = computed(() => {return props.items.slice(0, displayedCount.value);
});// 方法
const handleScroll = () => {if (!container.value) return;const { scrollTop, scrollHeight, clientHeight } = container.value;const distanceToBottom = scrollHeight - scrollTop - clientHeight;// 当距离底部小于阈值且还有数据时触发加载if (distanceToBottom < threshold && !loading && !noMore.value) {loadMore();}
};const loadMore = () => {if (displayedCount.value >= props.items.length) {noMore.value = true;return;}loading.value = true;// 模拟异步加载setTimeout(() => {displayedCount.value = Math.min(displayedCount.value + pageSize,props.items.length);loading.value = false;if (displayedCount.value >= props.items.length) {noMore.value = true;}}, 300);
};// 暴露方法给父组件
defineExpose({reset() {displayedCount.value = pageSize;noMore.value = false;},setLoading(status: boolean) {loading.value = status;}
});// 生命周期
onMounted(() => {if (container.value) {container.value.addEventListener('scroll', handleScroll);}
});onBeforeUnmount(() => {if (container.value) {container.value.removeEventListener('scroll', handleScroll);}
});
</script><style scoped>
.infinite-scroll-list {height: 100%;overflow-y: auto;
}.list-item {padding: 10px;border-bottom: 1px solid #eee;
}.loading-more,
.no-more {padding: 15px;text-align: center;color: #999;
}
</style>

这些优化方案可以有效解决前端处理大量数据时的卡顿问题：