饿了么表格性能优化
饿了么表格性能一直是有些问题的,特别是使用了固定列,表格会把固定列克隆出来一份,这样会导致渲染很多冗余DOM,随着数据量的增加,冗余DOM也会变多,如果固定列再使用插槽,里面嵌套复杂的组件,性能会下降更多。
最近在做表格的性能优化,发现如果不考虑IE浏览器的情况,可以使用 position: sticky
来实现固定列。
实现思路:
- 判断左右固定列,给表头表体表尾增加相应的固定列类名;
- 计算每个固定列偏移值,并动态给固定列赋样式;
- 拖拽表头时,重新计算偏移值;
相对复杂的就是计算每个固定列的偏移值。
目前唯一的缺陷就是在设置固定列的时候,中间不能有间隔,因为没有涉及到克隆。这种通过粘性布局处理固定列,好处就是完全通过CSS实现,性能会好很多,而且对以前的功能完全没有影响。
下图对比一下,少了固定列的 DOM。
另外之前也看过这篇文章:一顿操作,我把 Table 组件性能提升了十倍,里面的思路也可以借鉴一下。
目前组件已经发布,可以正常使用,demo地址:https://ui.const.team/#/component/table#gu-ding-lie