确定在GridManager内实现万条不卡的想法,最早出现于2021年初同郑某人
和杨某人
的饭局上。如今功能已经实现,整理下这个值得记录的过程。
现状分析
在虚拟滚动落地前,针对于现有逻辑的改造是个前置条件。
上方gif
内演示了在实现万条不卡前,表格组件所拥有的部分能力。由于这些能力搭建于原生跨框架的结构上,所以在需要对渲染逻辑进行较大范围改造时,原先的能力就成为了不小的包袱。
因此在不影响现有功能的情况下支持万条不卡,需要按序实现以下三个步骤:
- tbody区域的数据驱动改造:
降低功能复杂度
- 差异化更新:
减少DOM节点的更新频率
- 虚拟滚动:
减少DOM节点的更新数量
三个步骤
基于数据驱动,构建差异化更新,最终实现虚拟滚动。
1、数据驱动
随着js框架的出现,数据驱动改变了前端组件的渲染逻辑。
对于一个脱离框架的原生表格组件