搭建测试环境

前端实现（Vue3）

<template>
  <div>
    <div class="user-info" v-for="user in userList" :key="user.id">
      我是 {{ user.name }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const tableData = ref([])

const getData = async () => {
  const res = await fetch('/api/mock')
  const data = await res.json()
  tableData.value = data
}
getData()
</script>

<style scoped>
.user-info {
  height: 30px;
}
</style>

后端实现用

getMockData() {
  function generateMockData(amount) {
    const data: any = []
    for (let i = 0; i < amount; i++) {
      data.push({
        id: i,
        name: `User${i}`,
        timestamp: Date.now(),
        metadata: {}
      })
    }

    return data
  }

  const mockData = generateMockData(1000000)
  return mockData
}

方案一：使用Object.freeze实现

• ⏳渲染时间：需要 30s 左右
• ✅优点是能够避免后续数据变更的响应式消耗
• ❌缺点是无法解决初始渲染性能瓶颈

• const getData = async () => {
    const res = await fetch('/api/mock')
    const data = await res.json()
    userList.value = data.map((item: any) => Object.freeze(item))
  }
  

方案二：（通过分批渲染避免 主线程阻塞 ）分块渲染

• ⏳首屏时间：< 1s
• ❌缺点是随着数据的增加，DOM节点持续增加，最终仍影响性能

<script setup lang="ts">
import { ref } from 'vue'

const userList = ref<any[]>([])

const CHUNK_SIZE = 1000

const getData = async () => {
  const res = await fetch('/api/mock')
  const data = await res.json()

  function* chunkGenerator() {
    let index = 0
    while(index < data.length) {
      yield data.slice(index, index + CHUNK_SIZE)
      index += CHUNK_SIZE
    }
  }

  const generator = chunkGenerator()
  const processChunk = () => {
    const chunk = generator.next()
    if (!chunk.done) {
      userList.value.push(...chunk.value)
      requestAnimationFrame(processChunk)
    }
  }

  requestAnimationFrame(processChunk)
}
getData()
</script>

方案三：虚拟列表（优化方案）

• ⏳首屏时间：< 1s
• ✅优点是只渲染可视区域内容，只渲染 可视区域 内的DOM，减少不必要的消耗
• ❌缺点是实现相对麻烦，实际情况可能需要动态计算元素高度

<template>
  <div class="viewport" ref="viewportRef" @scroll="handleScroll">
    <!-- 占位元素保持滚动条高度 -->
    <div class="scroll-holder" :style="{ height: totalHeight + 'px' }"></div>
    <!-- 可视区域 -->
    <div class="visible-area" :style="{ transform: `translateY(${offset}px)` }">
      <div class="user-info" v-for="user in visibleData" :key="user.id">
        我是 {{ user.name }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'

const userList = ref<any[]>([])

const getData = async () => {
  const res = await fetch('/api/mock')
  const data = await res.json()
  userList.value = data
}
getData()

const viewportRef = ref<HTMLElement>()
const ITEM_HEIGHT = 30
const visibleCount = ref(0)
const startIndex = ref(0)
const offset = ref(0)

// 计算总高度
const totalHeight = computed(() => userList.value.length * ITEM_HEIGHT)

// 计算可见数据
const visibleData = computed(() => {
  return userList.value.slice(
    startIndex.value,
    Math.min(startIndex.value + visibleCount.value, userList.value.length)
  )
})

// 初始化可视区域数量
onMounted(() => {
  visibleCount.value = Math.ceil((viewportRef.value?.clientHeight || 0) / ITEM_HEIGHT) + 2
})

// 滚动处理
const handleScroll = () => {
  if (!viewportRef.value) return
  const scrollTop = viewportRef.value.scrollTop
  startIndex.value = Math.floor(scrollTop / ITEM_HEIGHT)
  offset.value = scrollTop - (scrollTop % ITEM_HEIGHT)
}
</script>

<style scoped>
.viewport {
  height: 100vh; /* 根据实际需求调整高度 */
  overflow-y: auto;
  position: relative;
}

.scroll-holder {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
}

.visible-area {
  position: absolute;
  left: 0;
  right: 0;
}

.user-info {
  height: 30px;
}
</style>