Appearance
大列表优化:虚拟滚动、分片与交互稳定性
主题边界
- 大列表问题同时涉及 DOM 数量、布局测量、事件处理、图片资源和数据获取节奏。
- 如果只盯着 diff,很容易忽略真正的瓶颈。
机制与流程
- 虚拟滚动通过维护可视窗口附近的少量节点,把完整数据映射为局部 DOM 子集。
- 高度固定的列表实现最简单;动态高度需要额外测量、缓存与回填,复杂度明显上升。
- 滚动过程中要避免同步布局、重型事件处理和不稳定 key,否则会造成抖动和白屏。
关键差异
- 分页降低的是单次数据量,虚拟滚动降低的是同时存在的 DOM 量;两者常一起使用。
- 分片渲染适合首次批量插入过多节点的场景,虚拟滚动适合长时间滚动浏览。
边界条件
- 虚拟列表会影响可访问性、浏览器查找、原生滚动定位和 SEO,不是所有列表都值得引入。
- 当单项本身极重时,只做 windowing 不一定够,还要优化单项渲染内容。
工程落点
- 优化大列表时应同时看节点数、布局次数、图片解码、滚动事件频率和数据分页策略。
- 很多表格卡顿不是因为框架慢,而是动态高度测量、固定列同步和悬浮交互叠加。