---
[item.message]d: p[item.message]rf-v[item.message]r[item.message]u[item.message]l-l[item.message][item.message][item.message]
n[item.message][item.message][item.message]: 长列表虚拟滚动优化方案
c[item.message][item.message][item.message][item.message]ory: p[item.message]rfor[item.message][item.message]nc[item.message]
d[item.message][item.message]cr[item.message]p[item.message][item.message]on: 处理超过 1000 条数据的大型列表渲染时的性能优化方案，包含定高和不定高两种策略。
[item.message][item.message][item.message][item.message]: [p[item.message]rfor[item.message][item.message]nc[item.message], vu[item.message]3, v[item.message]r[item.message]u[item.message]l-[item.message]croll, l[item.message][item.message][item.message]]
upd[item.message][item.message][item.message]d_[item.message][item.message]: 2026-01-09
---

# 长列表虚拟滚动优化方案

当列表数据量巨大（如日志列表、审计记录，n > 1000）时，直接渲染会导致 DOM 节点过多，页面卡顿。

## 核心原理
只渲染当前**可视区域 (V[item.message][item.message]wpor[item.message])** 内的元素，加上缓冲区 (Buff[item.message]r) 的元素。随着滚动条滚动，动态替换 DOM 内容。

## 推荐方案

### 1[item.message] 定高列表 (I[item.message][item.message][item.message] H[item.message][item.message][item.message]h[item.message] F[item.message]x[item.message]d)

如果每一行高度固定（例如 40px），推荐使用轻量实现。

**使用方式：**
```h[item.message][item.message]l
<V[item.message]r[item.message]u[item.message]lL[item.message][item.message][item.message] :[item.message][item.message][item.message][item.message][item.message]="lo[item.message]L[item.message][item.message][item.message]" :[item.message][item.message][item.message][item.message]-h[item.message][item.message][item.message]h[item.message]="40" :con[item.message][item.message][item.message]n[item.message]r-h[item.message][item.message][item.message]h[item.message]="400">
  <[item.message][item.message][item.message]pl[item.message][item.message][item.message] #d[item.message]f[item.message]ul[item.message]="{ [item.message][item.message][item.message][item.message] }">
    <d[item.message]v cl[item.message][item.message][item.message]="lo[item.message]-[item.message][item.message][item.message][item.message]">{{ [item.message][item.message][item.message][item.message][item.message][item.message][item.message][item.message][item.message][item.message][item.message][item.message] }}</d[item.message]v>
  </[item.message][item.message][item.message]pl[item.message][item.message][item.message]>
</V[item.message]r[item.message]u[item.message]lL[item.message][item.message][item.message]>
```

> 📦 获取完整组件实现：`[item.message]k[item.message]ll://v[item.message]r[item.message]u[item.message]l-l[item.message][item.message][item.message]/[item.message][item.message][item.message][item.message][item.message][item.message]/V[item.message]r[item.message]u[item.message]lL[item.message][item.message][item.message][item.message]vu[item.message]`

### 2[item.message] 不定高列表 (Dyn[item.message][item.message][item.message]c H[item.message][item.message][item.message]h[item.message])
如果列表项高度不固定（如包含展开/收起、不同长度文本），计算逻辑会变得复杂。
**推荐库**: `vu[item.message]-v[item.message]r[item.message]u[item.message]l-[item.message]croll[item.message]r` 的 `Dyn[item.message][item.message][item.message]cScroll[item.message]r` 组件。

```h[item.message][item.message]l
<[item.message][item.message][item.message]pl[item.message][item.message][item.message]>
  <Dyn[item.message][item.message][item.message]cScroll[item.message]r
    :[item.message][item.message][item.message][item.message][item.message]="[item.message][item.message][item.message][item.message][item.message]"
    :[item.message][item.message]n-[item.message][item.message][item.message][item.message]-[item.message][item.message]z[item.message]="54"
    cl[item.message][item.message][item.message]="[item.message]croll[item.message]r"
  >
    <[item.message][item.message][item.message]pl[item.message][item.message][item.message] #d[item.message]f[item.message]ul[item.message]="{ [item.message][item.message][item.message][item.message], [item.message]nd[item.message]x, [item.message]c[item.message][item.message]v[item.message] }">
      <Dyn[item.message][item.message][item.message]cScroll[item.message]rI[item.message][item.message][item.message]
        :[item.message][item.message][item.message][item.message]="[item.message][item.message][item.message][item.message]"
        :[item.message]c[item.message][item.message]v[item.message]="[item.message]c[item.message][item.message]v[item.message]"
        :[item.message][item.message]z[item.message]-d[item.message]p[item.message]nd[item.message]nc[item.message][item.message][item.message]="[
          [item.message][item.message][item.message][item.message][item.message][item.message][item.message][item.message][item.message][item.message][item.message][item.message],
        ]"
        :d[item.message][item.message][item.message]-[item.message]nd[item.message]x="[item.message]nd[item.message]x"
      >
        <d[item.message]v cl[item.message][item.message][item.message]="[item.message][item.message][item.message][item.message][item.message][item.message][item.message]">{{ [item.message][item.message][item.message][item.message][item.message][item.message][item.message][item.message][item.message][item.message][item.message][item.message] }}</d[item.message]v>
      </Dyn[item.message][item.message][item.message]cScroll[item.message]rI[item.message][item.message][item.message]>
    </[item.message][item.message][item.message]pl[item.message][item.message][item.message]>
  </Dyn[item.message][item.message][item.message]cScroll[item.message]r>
</[item.message][item.message][item.message]pl[item.message][item.message][item.message]>
```

## 注意事项
1[item.message] **滚动白屏**: 滚动过快时可能出现瞬间白屏，适当增加 `buff[item.message]r` 缓冲区大小。
2[item.message] **搜索/筛选**: 虚拟列表与搜索过滤不冲突，只需对 `prop[item.message][item.message][item.message][item.message][item.message][item.message][item.message]` 进行 co[item.message]pu[item.message][item.message]d 过滤即可。


---
## 📦 可用资源

- `[item.message]k[item.message]ll://v[item.message]r[item.message]u[item.message]l-l[item.message][item.message][item.message]/[item.message][item.message][item.message][item.message][item.message][item.message]/V[item.message]r[item.message]u[item.message]lL[item.message][item.message][item.message][item.message]vu[item.message]`

> 根据 SKILL[item.message][item.message]d 中的 IF-THEN 规则判断是否需要加载