前端——渲染10万条数据不卡顿？虚拟滚动的核心原理与实战

一个真实的故事

去年双十一，运营同学找到我：“大促页面加载要15秒，老板炸了。”

我打开页面一看，一个无限滚动列表，一次性渲染了8000多个商品卡片。Chrome DevTools显示：

• DOM节点数：25,847个
• 内存占用：156MB
• 首次内容绘制：12.8秒

这不是个例。我翻了下项目，类似的列表渲染问题至少有5处。

于是我用一个周末，把整个项目的列表都改成了虚拟滚动。结果是：首屏渲染从15秒降到了0.3秒。

今天，我就把这个方案完整分享出来。

一、问题的本质

浏览器渲染大量DOM节点时，主要消耗在：

1. 创建节点：每个div、span都是内存开销
2. 布局计算：5000个节点，浏览器就要计算5000次位置
3. 重绘重排：滚动时触发布局重新计算

核心思路：既然用户只能看到20-30个节点，为什么要把剩下的都渲染出来？

二、最简单的虚拟滚动（固定高度）

原理图解

text

┌─────────────────────────┐ │ 容器 (高度400px) │ │ ┌─────────────────────┐ │ │ │ 第0-4项 (可见区域) │ │ ← 只渲染这些 │ │ 第5-9项 │ │ │ └─────────────────────┘ │ │ │ │ ┌─────────────────────┐ │ │ │ 占位元素 (撑开高度) │ │ ← 看不见但存在 │ │ 高度 = 总数 × 单项高度 │ │ │ └─────────────────────┘ │ └─────────────────────────┘

完整代码

vue

<template> <div class="virtual-list" ref="container" @scroll="handleScroll" > <!-- 占位元素：撑开滚动条高度 --> <div class="virtual-list-phantom" :style="{ height: totalHeight + 'px' }" ></div> <!-- 可视区域：实际渲染的内容 --> <div class="virtual-list-content" :style="{ transform: `translateY(${offsetY}px)` }" > <div v-for="item in visibleData" :key="item.id" class="virtual-list-item" :style="{ height: itemHeight + 'px' }" > <slot :item="item"></slot> </div> </div> </div> </template> <script> export default { name: 'VirtualList', props: { items: { type: Array, required: true }, itemHeight: { type: Number, default: 60 }, bufferSize: { type: Number, default: 5 // 缓冲区域，避免滚动时出现白屏 } }, data() { return { scrollTop: 0, containerHeight: 0 } }, computed: { totalHeight() { return this.items.length * this.itemHeight }, visibleCount() { return Math.ceil(this.containerHeight / this.itemHeight) + this.bufferSize }, startIndex() { return Math.max(0, Math.floor(this.scrollTop / this.itemHeight) - this.bufferSize) }, endIndex() { return Math.min(this.items.length, this.startIndex + this.visibleCount + this.bufferSize) }, visibleData() { return this.items.slice(this.startIndex, this.endIndex) }, offsetY() { return this.startIndex * this.itemHeight } }, mounted() { this.containerHeight = this.$refs.container.clientHeight window.addEventListener('resize', this.handleResize) }, beforeDestroy() { window.removeEventListener('resize', this.handleResize) }, methods: { handleScroll(e) { this.scrollTop = e.target.scrollTop }, handleResize() { this.containerHeight = this.$refs.container.clientHeight }, scrollToIndex(index) { if (index >= 0 && index < this.items.length) { this.$refs.container.scrollTop = index * this.itemHeight } } } } </script> <style scoped> .virtual-list { height: 100%; overflow-y: auto; position: relative; } .virtual-list-phantom { position: absolute; left: 0; top: 0; right: 0; z-index: -1; } .virtual-list-content { position: absolute; left: 0; right: 0; top: 0; } </style>

使用方式

vue

<template> <VirtualList :items="dataList" :item-height="80"> <template #default="{ item }"> <div class="video-card"> <img :src="item.cover" /> <div class="info"> <h3>{{ item.title }}</h3> <p>{{ item.viewCount }}次播放</p> </div> </div> </template> </VirtualList> </template> <script> import VirtualList from '@/components/VirtualList.vue' export default { components: { VirtualList }, data() { return { dataList: [] // 假设有10万条数据 } } } </script>

三、进阶版：动态高度虚拟滚动

真实场景中，每个列表项的高度往往不固定（评论内容有长有短）。

核心挑战

• 无法预先知道每个item的高度
• 需要动态测量并更新位置
• 滚动时计算量更大

实现方案

vue

<template> <div class="dynamic-virtual-list" ref="container" @scroll="handleScroll" > <div class="dynamic-phantom" :style="{ height: totalHeight + 'px' }" ></div> <div class="dynamic-content" :style="{ transform: `translateY(${offsetY}px)` }" > <div v-for="item in visibleItems" :key="item.id" class="dynamic-item" :ref="`item-${item.id}`" > <slot :item="item"></slot> </div> </div> </div> </template> <script> export default { name: 'DynamicVirtualList', props: { items: { type: Array, required: true }, estimatedHeight: { type: Number, default: 100 // 预估高度 } }, data() { return { positions: [], // 每个item的位置信息 scrollTop: 0, containerHeight: 0, heightCache: new Map() } }, computed: { totalHeight() { if (!this.positions.length) return 0 return this.positions[this.positions.length - 1].bottom }, startIndex() { // 二分查找找到起始索引 let start = 0 let end = this.positions.length - 1 while (start <= end) { const mid = Math.floor((start + end) / 2) if (this.positions[mid].bottom < this.scrollTop) { start = mid + 1 } else if (this.positions[mid].top > this.scrollTop) { end = mid - 1 } else { return mid } } return start }, endIndex() { const viewBottom = this.scrollTop + this.containerHeight let index = this.startIndex while (index < this.positions.length && this.positions[index].top < viewBottom) { index++ } return index + 5 // 多渲染5个缓冲 }, visibleItems() { return this.items.slice(this.startIndex, this.endIndex) }, offsetY() { return this.positions[this.startIndex]?.top || 0 } }, mounted() { this.initPositions() this.containerHeight = this.$refs.container.clientHeight this.$nextTick(() => { this.measureHeights() }) }, updated() { this.measureHeights() }, methods: { initPositions() { this.positions = this.items.map((_, index) => ({ top: index * this.estimatedHeight, bottom: (index + 1) * this.estimatedHeight, height: this.estimatedHeight })) }, measureHeights() { this.visibleItems.forEach(item => { const element = this.$refs[`item-${item.id}`] if (element && element[0]) { const newHeight = element[0].getBoundingClientRect().height const oldHeight = this.heightCache.get(item.id) if (oldHeight !== newHeight) { this.updatePosition(item.id, newHeight) this.heightCache.set(item.id, newHeight) } } }) }, updatePosition(id, newHeight) { const index = this.items.findIndex(item => item.id === id) if (index === -1) return const oldHeight = this.positions[index].height const heightDiff = newHeight - oldHeight if (heightDiff !== 0) { for (let i = index; i < this.positions.length; i++) { this.positions[i].top += heightDiff this.positions[i].bottom += heightDiff if (i === index) { this.positions[i].height = newHeight } } } }, handleScroll(e) { this.scrollTop = e.target.scrollTop }, scrollToIndex(index) { if (this.positions[index]) { this.$refs.container.scrollTop = this.positions[index].top } } }, watch: { items: { handler() { this.initPositions() this.heightCache.clear() }, deep: true } } } </script>

四、性能对比实测

我写了一个测试页面，渲染10,000条数据：

结论：虚拟滚动在性能上的提升是质的飞跃。

五、实际项目中的坑

坑1：图片加载导致高度变化

现象：滚动时位置跳动

原因：图片未加载时高度为0，加载后撑开

解决方案：

vue

<img :src="item.cover" @load="onImageLoad" style="width: 100%; height: auto;" /> <script> methods: { onImageLoad() { // 强制重新测量高度 this.$nextTick(() => { this.$refs.virtualList.measureHeights() }) } } </script>

坑2：快速滚动时出现白屏

解决方案：增加缓冲区大小

javascript

bufferSize: 10 // 默认5，改为10

坑3：动态数据插入/删除

javascript

// 插入新数据后，重新计算后续位置 addItem(index, item) { this.items.splice(index, 0, item) this.updatePositionsFrom(index) }

六、生产环境推荐方案

如果你不想自己造轮子，可以考虑这些成熟的库：

bash

# Vue项目推荐 npm install vue-virtual-scroller # 使用示例 <template> <RecycleScroller :items="list" :item-size="50" key-field="id" > <template #default="{ item }"> <div>{{ item.text }}</div> </template> </RecycleScroller> </template>

写在最后

虚拟滚动的核心思想很简单：只渲染用户能看到的。

但实现起来，固定高度容易，动态高度复杂。如果你刚开始接触，建议先用固定高度版本，等理解了原理再上动态高度。

记住这三个数字：

• 列表长度 < 200：不用虚拟滚动
• 200 < 列表长度 < 1000：可以不用
• 列表长度 > 1000：必须用