大数据列表渲染系列(一)理论分析

donglegend

概述

业务场景:大数据渲染Table。

性能问题:直接使用listData渲染大量Dom,触发渲染性能问题,造成卡顿。

解决方案:虚拟渲染。

虚拟渲染并不是什么复杂技术,在其他界面渲染领域内,早已是个基本操作,比如游戏开发等,大世界地图渲染基本都是区域绘制,视界之外的不做绘制。
嗯,说起来简单,具体到业务场景还是非常复杂的,Table涉及单元格操作,下面逐步分析一下流程。

虚拟列表原理解析

我们先从最简单的虚拟列表开始,单方向的列表。
在开始之前,我先画一张原理示意图,辅助理解。
虚拟列表实现原理

如图所示,先进行区域划分:

  • 可见区域
  • 实际渲染区域(可见区域 + 前缓冲区 + 后缓冲区)
  • 已经加载的区域
  • 未加载的区域
  • 完整的虚拟列表区域(已加载 + 未加载)

根据上图所示原理,我们直接分析技术实现:

  1. 实际我们渲染的是某一个区间段的数据[startIndex, endIndex]
  2. 计算出这个区间段,并且监听onScroll事件更新 区间
  3. 根据区间数据渲染区域dom节点元素的位置

其中第三点如何正确渲染dom节点的位置,可以有多种实现方式:

  • 通过设置padding来撑开元素,然后自动排列
  • 通过position定位来实现元素排列
  • 通过transform偏移来实现
  • ......

html结构设计也非常简单,大概如下:

/***
* stage: 视觉窗口,拥有width,height尺寸信息,超出滚动
* list: 列表容器,拥有容纳所有data的尺寸信息
* row: 每条数据渲染节点
***/
<div class="stage"> 
    <div class="list">
        <div class="row"></div> 
    </div>
</div>

ok,理论分析到这里结束了,下一节我们就要开始进入实战,如何计算位置信息了。

阅读 975

前端小记
断桥何曾断

长安的风何时才能吹到边梁?

905 声望
82 粉丝
0 条评论

长安的风何时才能吹到边梁?

905 声望
82 粉丝
文章目录
宣传栏