什么是虚拟列表
在开发网页应用时，经常会遇到需要展示大量数据的场景，比如一个包含上万条记录的日志列表、商品目录或聊天消息流。如果把这些数据一次性全部渲染到页面上，浏览器很容易卡顿甚至崩溃。这时候，虚拟列表（Virtual List）就派上了用场。
虚拟列表的核心思路是：只渲染当前可见区域内的那一小部分数据，而不是把所有项都画出来。就像手机刷长微博时，你只看到屏幕上的内容，上下滑动时动态加载新内容，其余的暂时不处理。
为什么能提高渲染性能
浏览器渲染大量 DOM 元素会消耗大量内存和计算资源。假设一个列表有 10000 条数据，每条生成一个 div，那就是一万个节点。即便设置了 display: none，这些元素依然存在于 DOM 树中，事件绑定、样式计算、重排重绘都会拖慢整体表现。
而虚拟列表通过计算滚动位置和容器高度，仅渲染视口内及附近几项，通常只维持几十个 DOM 节点。这样一来，内存占用大幅下降，页面滚动也更加流畅。
简单实现原理
以一个高度固定的列表为例，可以预先知道每个项目的高度。当用户滚动时，根据 scrollTop 计算出当前应显示的起始索引和结束索引，然后只渲染这一段。
<div class="virtual-list" style="height: 400px; overflow: auto;">
<div style="height: 40000px; position: relative;"> <!-- 总占位高度 -->
<div v-for="item in visibleItems"
:key="item.id"
:style="{ position: 'absolute', top: item.top + 'px', height: '40px' }">
{{ item.text }}
</div>
</div>
</div>上面这段结构中，外层容器负责滚动，内部用一个高 div 占位撑起滚动条总长度，实际内容用 absolute 定位精确投放到对应位置。滚动时动态更新 visibleItems 数据即可。
适用于哪些硬件环境
尤其在配置较低的设备上，比如老款笔记本、入门级台式机或内存有限的平板，这种优化效果更明显。很多企业还在使用几年前的办公电脑，打开一个没做优化的长列表页面，风扇狂转、页面卡死是常事。引入虚拟列表后，即使在 i3 处理器、8GB 内存的老机器上也能流畅操作。
另外，在远程桌面或云桌面环境中，网络延迟加上终端设备性能不足，页面响应更要精打细算。减少 DOM 数量不仅减轻本地渲染压力，也能降低数据传输量，间接提升体验。
实际应用场景
某公司内部的工单系统原本加载 5000 条维修记录要近 10 秒，页面卡得没法操作。改造时引入了虚拟列表方案，首次渲染只加载屏幕上能显示的约 20 条，配合懒加载和缓存机制，打开速度降到 1 秒以内，运维人员反馈操作顺滑多了。
类似的还有设备监控日志、传感器历史数据表格等场景，数据量大且需要实时查看。不做优化的话，别说分析问题，光是滑动页面都费劲。
注意事项
虽然虚拟列表优势明显，但也不是万能药。如果每行内容高度不固定，计算逻辑会复杂一些，可能需要借助测量函数或缓存每一项的高度。此外，搜索、跳转到指定位置等功能也要配合调整，不能只依赖原生滚动。
对于特别复杂的项目结构，比如每行都有图表或嵌套组件，还得结合懒加载和组件销毁机制，避免内存泄漏。