虚拟列表
通过只渲染可视区域附近节点来优化长列表性能的常见方案。
#frontend
#concept
#growing
[!info] related notes
- 所属 MOC: 前端基础 MOC, 前端工程化 MOC
- 相关概念: react-list-rendering-and-key, 浏览器渲染流程, 前端性能优化一般从哪些方面做
- 面试问法: 什么是虚拟列表，为什么它能优化长列表性能
虚拟列表
长列表性能问题，很多时候不是数据太多，而是一次性渲染的 DOM 节点太多。
一句话定义
虚拟列表通过只渲染当前可见区域附近的列表项，来减少 DOM 数量和渲染压力。
它解决什么问题
- 大量 DOM 节点导致渲染和更新变慢
- 滚动卡顿
- 列表项很多时内存占用上升
核心思路
- 计算当前滚动位置
- 只渲染可视区域内和附近的少量节点
- 用占位容器维持整体滚动高度
什么时候特别适合用
- 成百上千条列表项
- 每个列表项结构较重
- 滚动性能明显下降
常见误区
- 数据一多就立刻上虚拟列表，忽略了实际瓶颈
- 忽略动态高度、滚动定位、可访问性等复杂度
- 以为虚拟列表只是“少渲染”，却没有理解占位和可视窗口计算
最短记忆方式
虚拟列表不是把所有项都画出来，而是只画你眼前那一小段。
面试要点
来自 什么是虚拟列表，为什么它能优化长列表性能 的面试视角整理。
一句话回答
虚拟列表通过只渲染可视区域附近的少量节点，减少真实 DOM 数量和更新成本，所以在长列表场景下能显著改善渲染和滚动性能。
最稳的回答主线
- 长列表常见瓶颈是 DOM 太多
- 虚拟列表不会一次把所有项都真正渲染出来
- 它保留整体滚动体验，但把实际渲染量压缩到可视区附近
最短记忆方式
滚动的是整段数据，渲染的是眼前这一小段。
Digital Biome