面试官问:后端一次性给你一千万条数据,如何优化前端渲染?
在一次面试中,被问到这样一个经典问题:'如果后端一次性返回一千万条数据,前端直接渲染导致页面卡死,你会怎么优化?'如果无法改变接口设计,应尽量避免将这些数据设为响应式,并采用分页或懒加载的方式逐步渲染。
测试环境搭建
前端(Vue 3)
<template>
<div>
<div v-for="user in userList" :key="user.id">
我是 {{ user.name }}
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const userList = ref([])
const getData = async () => {
const res = await fetch('/api/mock')
const data = await res.json()
userList.value = data
}
getData()
</script>
<style scoped>
.user-info {
height: 30px;
}
</style>
后端(NestJS)
getMockData() {
function generateMockData(amount: number) {
const data = []
for (let i = 0; i < amount; i++) {
data.push({
id: i,
name: `User${i}`,
timestamp: Date.now(),
metadata: {}
})
}
return data
}
return generateMockData(1_000_000) // 实际测试用 100 万条
}
⚠️ 注意:尝试生成 1000 万条时,Node.js 报错:FATAL ERROR: JS heap out of memory。即使调高内存上限,V8 引擎也因字符串长度超限而崩溃(JSON 响应体过大)。所以最终测试基于 100 万条数据(已足够说明问题)。
初始效果:页面渲染耗时约 30 秒,完全不可用。
方案一:Object.freeze —— 面试官的'标准答案'?
userList.value = data.map(item => Object.(item))

