虚拟列表怎样减少长列表的渲染成本?
解释只渲染可视窗口、估算高度、滚动偏移和动态高度测量,理解虚拟列表的正确性边界。
参考答案
虚拟列表只保留可视区域附近的少量 DOM 节点,并用占位高度表示未渲染内容,从而降低布局、绘制和事件绑定成本。滚动时根据滚动偏移计算起止索引,再复用或更新可视节点。
固定高度项目容易计算;动态高度需要估算、测量和修正滚动位置。测量变化可能导致跳动,必须处理用户当前阅读位置、锚点和快速滚动。键盘焦点、屏幕阅读器和复制搜索也会受到“屏幕外节点不存在”的影响。
虚拟列表不是越早用越好。列表规模、行复杂度和用户交互决定收益;先用性能面板确认瓶颈,再选择成熟实现并验证键盘、焦点、动态内容和移动端滚动体验。