当一次性渲染十万条 DOM 节点时,浏览器会瞬间陷入「卡顿---白屏---崩溃」三连击。虚拟长列表(Virtual Scroller)把「按需渲染」做到极致:只绘制可见区域并加少量缓冲,让巨量数据在低端设备也能保持 60 FPS。
一、问题本质:渲染成本与滚动成本的矛盾
渲染成本等于节点数量乘以单个节点复杂度,滚动成本等于布局重排乘以样式重绘。浏览器单帧预算约 16 ms,若一次回流就耗时 30 ms,动画必然掉帧。虚拟化的核心思路是把 O(N) 的渲染复杂度降为 O(屏幕可显示的最大条数)。
二、设计总览:三段式流水线
度量层:计算总高度,撑开滚动条,欺骗浏览器这里真的有十万条。
切片层:监听 scroll,根据滚动距离反推出首条索引与尾条索引。
渲染层:用绝对定位把切片渲染到正确位置,维持视觉连续性。
三、缓冲区与索引计算
获取当前滚动距离 scrollTop 与容器可视高度 clientHeight,先计算首条索引 startIndex 与尾条索引 endIndex,再前后各扩展 prev/next 条作为缓冲,避免快速滚动时出现空白闪烁。startPos 为首条切片距离容器顶部的绝对偏移量,用于后续 translateY。
js
const startIndex = Math.floor(scrollTop / itemSize) - prev
const endIndex = Math.ceil((scrollTop + clientHeight) / itemSize) + next
const startPos = startIndex * itemSize
随后用 slice 取出数据区间并映射成渲染池 pool,每个元素携带原始 item 与 position。
四、绝对定位与 transform 的选择
top 会触发重排,transform 只触发合成层重绘。合成层由 GPU 处理,主线程压力降低 80% 以上。搭配 will-change: transform 提前提升图层,低端机也能稳住 60 FPS。
五、性能陷阱与修复要点
动态行高场景下,度量层计算失准,可用预扫描或 ResizeObserver 缓存每行真实高度。快速滚动出现白屏闪烁时,可加大 prev/next 缓冲量,并用 requestAnimationFrame 节流 scroll 事件。组件卸载时务必移除 scroll 监听器,防止内存泄漏。虚拟行内部若使用 v-model,每次输入都会触发全表更新,可改用 .lazy 或手动提交,避免动画掉帧。
六、代码实例
vue
<template>
<div class="scroller" @scroll="update">
<div class="spacer" :style="{ height: totalHeight + 'px' }"></div>
<div
class="row"
v-for="row in pool"
:key="row.key"
:style="{ transform: `translateY(${row.y}px)` }"
>
{{ row.item.text }}
</div>
</div>
</template>
<script>
export default {
props: {
items: Array,
itemHeight: { type: Number, default: 50 }
},
data: () => ({ pool: [] }),
computed: {
totalHeight() {
return this.items.length * this.itemHeight;
}
},
methods: {
update() {
const st = this.$el.scrollTop;
const ch = this.$el.clientHeight;
const start = Math.floor(st / this.itemHeight);
const end = Math.ceil((st + ch) / this.itemHeight);
const y = start * this.itemHeight;
this.pool = this.items.slice(start, end).map((item, i) => ({
key: item.id,
item,
y: y + i * this.itemHeight
}));
}
},
mounted() {
this.update();
}
};
</script>
<style>
.scroller { height: 400px; overflow: auto; position: relative; }
.spacer { position: absolute; top: 0; left: 0; right: 0; }
.row { position: absolute; left: 0; right: 0; height: 50px; }
</style>