• 尽可能少的渲染 DOM，只渲染可视区范围内的DOM，解决大量DOM的重绘和回流
    • 滚动出去的 DOM也会重绘和回流，影响性能
    • 不在可视区的 DOM直接销毁
  • 不用全部加载出所有的DOM节点。默认只渲染可视区域及可视区域外的一个节点
  • 用于处理大型数据列表。当使用在大型数据列表中，可避免因为数据的更新而导致大量的重新渲染

无限滚动，X轴，横向

  • 纵向虚拟滚动，Y轴，纵向
  • 既然只能在同一时刻看到4个节点，为什么不能只创建4个节点，剩下的节点都是通过滚动要展现的时候，才去创建呢？
  • 虚拟滚动，就是出于这个目的来设计的

无限滚动应用场景

  • 移动端的瀑布流
  • PC端商品列表的，无限下拉刷新
  • 刷不到底的新闻feed流
  • 无尽图片瀑布流
  • 编辑窗口加载卡顿等

table & div模拟

  • 采用原生table，还是用div来模拟
  • 对于树形表格，采取怎样的虚拟滚动方案？
  • 组件的职责边界怎么界定？

table布局有浏览器的特定算法实现加速绘制，且对静态表格来说，页面结构是很稳定的

  • 表格左右列固定，中间列可滚动
  • 要多用两个table定位来辅助，一个在左，一个在右
  • 三兄弟之间，还要时不时保持联络，确保大家每行高度都是一样的。

div模拟表格，绘制的速度也不慢，要做许多额外的维护工作

缓存优化

缓存节点，diff计算每次滚动时要改变的节点等