Vue 3 实现高性能虚拟列表:Spacer 占位 vs Absolute 定位,哪种更优?

📖 正文

在前端开发中,大数据量列表渲染 一直是性能挑战。假设我们有一个 API 返回 1 万条数据 ,如果直接渲染到页面,必然会导致严重卡顿甚至浏览器崩溃。

解决方案就是 ------ 虚拟列表 (Virtual List)

虚拟列表的核心思想是:只渲染当前视口范围内的元素 ,通过计算位置来"假装"完整渲染。

常见实现方式主要有两种:

  1. Spacer 占位法
  2. Absolute 定位法

本文将对比这两种实现,并给出适用场景。


🔹 1. Spacer 占位法实现

思路:用 上空白块 + 下空白块 撑出容器总高度,视口中只渲染真实元素。

xml 复制代码
<div ref="root" @scroll="onScroll"
     :style="{ overflowY: 'auto', height: containerHeight + 'px' }">
  <!-- 上占位 -->
  <div :style="{ height: topSpacer + 'px' }"></div>

  <!-- 可见元素 -->
  <div v-for="item in visibleItems" :key="item.id" class="virtual-item">
    {{ item.text }}
  </div>

  <!-- 下占位 -->
  <div :style="{ height: bottomSpacer + 'px' }"></div>
</div>

👉 优点:

  • 实现简单直观
  • 支持动态高度(只要调整 spacer 值即可)

👉 缺点:

  • 多余的 DOM(两个 spacer)
  • 每次滚动都要更新 topSpacerbottomSpacer,涉及 回流 (Reflow)

🔹 2. Absolute 定位法实现

思路:先撑出一个 固定高度的容器 ,每个 item 通过 absolute + top 定位。

xml 复制代码
<div ref="root" @scroll="onScroll"
     :style="{ overflowY: 'auto', height: containerHeight + 'px', position: 'relative' }">
  
  <!-- 总高度容器 -->
  <div :style="{ height: totalHeight + 'px', position: 'relative' }">
    <div v-for="(item, idx) in visibleItems"
         :key="item.id"
         class="virtual-item"
         :style="{ position: 'absolute', top: (startIndex + idx) * itemHeight + 'px' }">
      {{ item.text }}
    </div>
  </div>
</div>

👉 优点:

  • DOM 结构更简洁(没有 spacer)
  • 绝对定位减少回流,性能更好
  • 更适合大数据场景(5w+ 条时依然稳定)

👉 缺点:

  • 对自适应高度支持不友好(必须固定高度)
  • position: sticky 等布局特性会失效

🔹 3. 性能对比

对比维度 Spacer 占位法 Absolute 定位法
DOM 结构 多 2 个占位元素 更简洁
回流影响 spacer 高度频繁变化,可能触发回流 元素绝对定位,回流更少
动态高度 支持,容易实现 支持困难,需要累积高度映射
大数据量 (10w+) 可能浮点误差 更稳,FPS 更高
布局特性 流式布局更自然 绝对定位可能受限

🔹 4. 实践建议

  • 固定高度 item → 推荐 Absolute 定位法
    简洁高效,减少 DOM & 回流开销。
  • 动态高度 item → 推荐 Spacer 占位法
    更容易适配复杂布局。
  • 超大数据量 (5w+ 条) → Absolute 更稳

如果你要做一个通用组件,可以支持 两种实现方式切换

  • 默认使用 Absolute 定位法
  • 如果检测到 item 高度不一致,再切换到 Spacer 占位法

这种混合策略,正是一些成熟虚拟列表库(如 react-windowvue-virtual-scroll-list)的做法。


🔹 5. 结论

  • 两种方案都能解决虚拟列表问题
  • Absolute 定位法 在固定高度场景下性能更优
  • Spacer 占位法 更灵活,能支持动态高度

👉 所以,选择哪种方案要根据 业务需求 来定。

相关推荐
Mike_jia6 分钟前
SSM平台:Ansible与Docker融合的运维革命——轻量级服务器智能管理指南
前端
yinuo7 分钟前
Uni-App跨端开发实战:编译微信小程序跳转全平台终极指南(01)
前端
小流苏生10 分钟前
或许,找对象真的太难了……
前端·后端·程序员
前端小巷子19 分钟前
Vue 3 模板编译器
前端·vue.js·面试
江城开朗的豌豆20 分钟前
为什么在render里调setState,代码会和你“翻脸”?
前端·javascript·react.js
江城开朗的豌豆22 分钟前
子组件改状态,父组件会“炸毛”吗?
前端·javascript·react.js
晓得迷路了23 分钟前
栗子前端技术周刊第 96 期 - Rspack v1.5、ESLint v9.34.0、Bun v1.2.1...
前端·javascript·bun
Sapphire~23 分钟前
重学JS-004 --- JavaScript算法与数据结构(四)JavaScript 表单验证
前端·javascript·数据结构·算法
程序视点31 分钟前
局域网文件传输神器LocalSend:比微信QQ更快更安全的跨平台传输方案
前端·后端
用户61204149221335 分钟前
springboot+vue+小程序做的积分兑换系统
前端·vue.js·spring boot