当后端一次性返回十万条数据时，前端需要采用多种性能优化策略来避免页面卡顿。以下是主要的优化方案：
- 分页加载 - 将数据分批次加载显示
- 虚拟滚动 - 只渲染可视区域内的数据
- 数据懒加载 - 按需加载数据
- 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);
// 让出控制权，避免阻塞UI
if (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 Worker
const 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>
这些优化方案可以有效解决前端处理大量数据时的卡顿问题：
- 分页加载：将10万条数据分页显示，每次只渲染少量数据
- 虚拟滚动：只渲染可视区域内的数据项，大幅减少DOM节点数量
- 时间切片：将大数据处理任务分解成小块，避免长时间阻塞主线程
- 按需渲染：根据用户滚动位置动态加载和卸载数据
- 性能监控：实时显示渲染性能指标，便于调优
通过这些技术的组合使用，即使面对10万条数据，页面也能保持流畅的用户体验。