前端知库

虚拟列表通过什么方式减少渲染成本?

参考答案

虚拟列表只渲染可视区及附近一小段内容,通过占位空间和偏移维持完整滚动范围。它减少同时存在的 DOM 和更新工作,但不会自动减少已经下载到内存的数据量。

定高列表可根据滚动偏移计算范围;不定高列表则需要测量、缓存尺寸,并在估计修正时控制跳动。适量预渲染附近项目可减少快速滚动时的空白,范围过大又会削弱收益。项目标识应稳定,不能让节点复用把某行的局部状态带到另一行。

这些是实现时需要处理的工程约束:焦点项被卸载、键盘导航、读屏信息、页面查找和打印都可能受影响。短列表不一定需要虚拟化;先确定瓶颈,再选择经过维护的实现,并用实际数据规模验证。