前端虚拟长列表

当一次性渲染十万条 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>
相关推荐
秋名山大前端36 分钟前
Chrome GPU 加速优化配置(前端 3D 可视化 / 数字孪生专用)
前端·chrome·3d
今天不要写bug38 分钟前
antv x6实现封装拖拽流程图配置(适用于工单流程、审批流程应用场景)
前端·typescript·vue·流程图
luquinn38 分钟前
实现统一门户登录跳转免登录
开发语言·前端·javascript
用户21411832636021 小时前
dify案例分享-5分钟搭建智能思维导图系统!Dify + MCP工具实战教程
前端
augenstern4161 小时前
HTML(面试)
前端
excel1 小时前
前端常见布局误区:1fr 为什么撑爆了我的容器?
前端
烛阴1 小时前
TypeScript 类型魔法:像遍历对象一样改造你的类型
前端·javascript·typescript
vayy1 小时前
uniapp中 ios端 scroll-view 组件内部子元素z-index失效问题
前端·ios·微信小程序·uni-app
专注API从业者2 小时前
基于 Node.js 的淘宝 API 接口开发:快速构建异步数据采集服务
大数据·前端·数据库·数据挖掘·node.js
前端无冕之王2 小时前
一份兼容多端的HTML邮件模板实践与详解
前端·css·数据库·html