概述

在展示大型列表和表格数据的时候（城市列表、通讯录、微博等），会导致页面卡顿，滚动不流畅等性能问题，这样就会导致移动设备耗电加快，影响移动设备的电池寿命

产生性能问题的元素：大量DOM节点的重绘和重排

优化方案：

• 懒渲染
• 可视区域渲染

懒渲染

• 懒加载，常见的长列表优化方案，常见于移动端
• 原理：每次只渲染一部分，等渲染的数据即将滚动完时，再渲染下面部分
• 优点：每次渲染一部分数据，速度快
• 缺点：数据量大时，页面中依然存在大量DOM节点，占用内存过多，降低浏览器渲染性能，导致页面卡顿
• 使用场景：数据量不大的情况下
  

可视区渲染（React-virtualized）

原理： 只渲染页面可视区域的列表项，非可视区域的数据 “完全不渲染”(预加载前面几项和后面几项) ，在滚动列表时动态更新列表项


为了防止白屏，所以实际会多加载几条数据

使用场景： 一次性展示大量数据的情况