Skip to content

大列表优化:虚拟滚动、分片与交互稳定性

主题边界

  • 大列表问题同时涉及 DOM 数量、布局测量、事件处理、图片资源和数据获取节奏。
  • 如果只盯着 diff,很容易忽略真正的瓶颈。

机制与流程

  • 虚拟滚动通过维护可视窗口附近的少量节点,把完整数据映射为局部 DOM 子集。
  • 高度固定的列表实现最简单;动态高度需要额外测量、缓存与回填,复杂度明显上升。
  • 滚动过程中要避免同步布局、重型事件处理和不稳定 key,否则会造成抖动和白屏。

关键差异

  • 分页降低的是单次数据量,虚拟滚动降低的是同时存在的 DOM 量;两者常一起使用。
  • 分片渲染适合首次批量插入过多节点的场景,虚拟滚动适合长时间滚动浏览。

边界条件

  • 虚拟列表会影响可访问性、浏览器查找、原生滚动定位和 SEO,不是所有列表都值得引入。
  • 当单项本身极重时,只做 windowing 不一定够,还要优化单项渲染内容。

工程落点

  • 优化大列表时应同时看节点数、布局次数、图片解码、滚动事件频率和数据分页策略。
  • 很多表格卡顿不是因为框架慢,而是动态高度测量、固定列同步和悬浮交互叠加。

相关主题