饿了么表格性能一直是有些问题的,特别是使用了固定列,表格会把固定列克隆出来一份,这样会导致渲染很多冗余DOM,随着数据量的增加,冗余DOM也会变多,如果固定列再使用插槽,里面嵌套复杂的组件,性能会下降更多。
最近在做表格的性能优化,发现如果不考虑IE浏览器的情况,可以使用 position: sticky
来实现固定列。
相对复杂的就是计算每个固定列的偏移值。
目前唯一的缺陷就是在设置固定列的时候,中间不能有间隔,因为没有涉及到克隆。这种通过粘性布局处理固定列,好处就是完全通过CSS实现,性能会好很多,而且对以前的功能完全没有影响。
下图对比一下,少了固定列的 DOM。
另外之前也看过这篇文章:一顿操作,我把 Table 组件性能提升了十倍,里面的思路也可以借鉴一下。