大数据列表渲染系列（一）理论分析
概述
业务场景：大数据渲染Table。
性能问题：直接使用listData渲染大量Dom，触发渲染性能问题，造成卡顿。
解决方案：虚拟渲染。
虚拟渲染并不是什么复杂技术，在其他界面渲染领域内，早已是个基本操作，比如游戏开发等，大世界地图渲染基本都是区域绘制，视界之外的不做绘制。
嗯，说起来简单，具体到业务场景还是非常复杂的，Table涉及单元格操作，下面逐步分析一下流程。
虚拟列表原理解析
我们先从最简单的虚拟列表开始，单方向的列表。
在开始之前，我先画一张原理示意图，辅助理解。
如图所示，先进行区域划分：
- 可见区域
- 实际渲染区域(可见区域 + 前缓冲区 + 后缓冲区)
- 已经加载的区域
- 未加载的区域
- 完整的虚拟列表区域(已加载 + 未加载)
- 实际我们渲染的是某一个区间段的数据[startIndex, endIndex]
- 计算出这个区间段，并且监听onScroll事件更新 区间
- 根据区间数据渲染区域dom节点元素的位置
- 通过设置padding来撑开元素，然后自动排列
- 通过position定位来实现元素排列
- 通过transform偏移来实现
- ......
/***
* stage: 视觉窗口，拥有width，height尺寸信息，超出滚动
* list: 列表容器，拥有容纳所有data的尺寸信息
* row: 每条数据渲染节点
***/
【大数据列表渲染系列（一）理论分析】ok，理论分析到这里结束了，下一节我们就要开始进入实战，如何计算位置信息了。
推荐阅读
- 我要做大厨
- Docker应用:容器间通信与Mariadb数据库主从复制
- 《真与假的困惑》???|《真与假的困惑》??? ——致良知是一种伟大的力量
- 知识
- 三十年后的广场舞大爷
- 奔向你的城市
- 村里的故事|村里的故事 --赵大头
- 期刊|期刊 | 国内核心期刊之（北大核心）
- 华为旁！大社区、地铁新盘，佳兆业城市广场五期！
- 汇讲-勇于突破