原生跨框架的表格组件,三步实现万条不卡

确定在GridManager内实现万条不卡的想法,最早出现于2021年初同郑某人杨某人的饭局上。如今功能已经实现,整理下这个值得记录的过程。
现状分析

在虚拟滚动落地前,针对于现有逻辑的改造是个前置条件。

上方gif内演示了在实现万条不卡前,表格组件所拥有的部分能力。由于这些能力搭建于原生跨框架的结构上,所以在需要对渲染逻辑进行较大范围改造时,原先的能力就成为了不小的包袱。
【原生跨框架的表格组件,三步实现万条不卡】因此在不影响现有功能的情况下支持万条不卡,需要按序实现以下三个步骤:
  • tbody区域的数据驱动改造: 降低功能复杂度
  • 差异化更新: 减少DOM节点的更新频率
  • 虚拟滚动: 减少DOM节点的更新数量
三个步骤 基于数据驱动,构建差异化更新,最终实现虚拟滚动。
1、数据驱动
随着js框架的出现,数据驱动改变了前端组件的渲染逻辑。
对于一个脱离框架的原生表格组件,虽然需要自行实现数据驱动,但难度其实不大,只需将tbody区域内的所有渲染逻辑进行整合,并向外透出唯一的数据变更接收函数。
这个函数起到一个承上启下的作用,隔离了数据层与视图层。在数据变更时被触发,并根据触发的不同场景对tbody区域进行渲染。
假设这个函数叫changeTableData,实现数据驱动后的逻辑如下:
// 当数据变更时,函数会被触发,由该函数来判断哪些DOM应该被更新。 changeTableData() { const data = https://www.it610.com/article/getTableData(); // tbody render renderTbody(data); }// 场景一: 分页被执行时 changeTableData(); // 场景二: 某条数据被修改时 changeTableData();

数据驱动只是一个先决条件,差异化更新和虚拟滚动才是解决卡顿的手段。
2、差异化更新
表格组件所依赖的数据无论是什么格式,都会存在一个与渲染结果相匹配的数组。
[{ id: 1, name: '张三' },{ id: 2, name: '李四' },{ id: 3, name: '王五' }]

这个数组在特定情况下,返回结果会存在与已渲染数据相同或部分相同的情况。比如说: 在触发搜索后再次返回了以下数据:
[{ id: 1, name: '张三丰' },{ id: 2, name: '李四' },{ id: 3, name: '王五' },{ id: 4, name: '赵六' }]

将两次的返回结果进行比较,可以发现:
  • 数组的长度增加1
  • 索引为0的name发生了变化
如果不加甄别的进行重新渲染,就会存在不必要的DOM操作,特别是在数据量较大时,对性能的消耗是极大的。
为防止不必要的性能消耗,需要基于数据驱动的逻辑对DOM进行差异化更新。
const diffTableData = https://www.it610.com/article/(oldData, newData) => { // 通过比对oldData与newData,生成一个新的数组 const diffList = []; // ...省略掉的比对逻辑 return diffList; };

通过diffTableData函数,比对数据得到以下结果:
[{ id: 1, name: '张三丰' }, , , { id: 4, name: '赵六' }]

在得到排重的结果后,并数据进行渲染。
changeTableData() { const oldData = https://www.it610.com/article/getOldData(); const newData = getNewData(); // 提供diff函数,将比对后的数据进行渲染,未变更的DOM不更新 const diffData = diffTableData(oldData, newData); // tbody render renderTbody(diffData); }

以上示例仅是用于展示逻辑,完整实现可点击github地址查看diffTableData函数。
3、虚拟滚动
用户看到的一万条数据,其实在前端只渲染了20条。
当原生表格的tbody区域实现数据驱动后,通过在changeTableData中提供勾子供scroll事件调用即可实现虚拟滚动。
在勾子内通过滚轴的scrollTop计算当前需要显示的数据,通过margin填充虚拟部分的滚轴高度。并在这些基础上增加一些防抖机制,让虚拟滚动更流畅。
changeTableData() { // 在tbody区域滚轴事件中调用 virtualScrollMap[key] = () => { // 1、计算当前需要显示的数据,保证tr的最大值不超过20 // 2、通过margin填充虚拟部分的滚轴高度 // 3、增加防抖 }; }// tbody区域的滚轴事件 onScroll = () => { // 调用changeTableData提供的勾子 virtualScrollMap[key](); }

以上示例仅是用于展示逻辑,完整实现可点击github地址查点changeTableData函数。
效果展示 tbody区域实现数据驱动差异化更新虚拟滚动后,在2021年的最后一天,万条不卡最终以即定步骤得以发布,效果如下:

new GridManager(table, { // 启用虚拟滚动 @2.18.0 virtualScroll: { // 在使用supportTreeData与fullColumn时虚拟滚动无效。 // 使用静态导出,必须配置handler,否则导出数据长度为virtualNum; // 打印时仅对当前配置virtualNum的条数生效 useVirtualScroll: true,// 实际渲染的Tr数,该数值大于当前页数据长度时,虚拟滚动不生效 virtualNum: 10 }, // ...其它配置项 });

gif中可以看出,虽然存在10000条数据,但tbody区域的tr节点一直保持在10个。table上的margin根据滚动轴的位置不断变化,支撑着表格区域的高度。
开源不易 最近听杨某人说要搞个组件库,闲聊间想起六年前GridManager的样子,真是一言难尽、一路艰辛。
开源不易,希望可以坚持下去。

    推荐阅读