饿了么表格性能优化

饿了么表格性能一直是有些问题的,特别是使用了固定列,表格会把固定列克隆出来一份,这样会导致渲染很多冗余DOM,随着数据量的增加,冗余DOM也会变多,如果固定列再使用插槽,里面嵌套复杂的组件,性能会下降更多。

最近在做表格的性能优化,发现如果不考虑IE浏览器的情况,可以使用 position: sticky 来实现固定列。

实现思路:

  1. 判断左右固定列,给表头表体表尾增加相应的固定列类名;
  2. 计算每个固定列偏移值,并动态给固定列赋样式;
  3. 拖拽表头时,重新计算偏移值;

相对复杂的就是计算每个固定列的偏移值。

目前唯一的缺陷就是在设置固定列的时候,中间不能有间隔,因为没有涉及到克隆。这种通过粘性布局处理固定列,好处就是完全通过CSS实现,性能会好很多,而且对以前的功能完全没有影响。

下图对比一下,少了固定列的 DOM。

2023-08-27T07:09:42.png

2023-08-27T07:21:55.png

2023-08-27T08:08:11.png

另外之前也看过这篇文章:一顿操作,我把 Table 组件性能提升了十倍,里面的思路也可以借鉴一下。

目前组件已经发布,可以正常使用,demo地址:https://ui.const.team/#/component/table#gu-ding-lie

添加新评论