IT博客汇
  • 首页
  • 精华
  • 技术
  • 设计
  • 资讯
  • 扯淡
  • 权利声明
  • 登录 注册

    饿了么表格性能优化

    王叨叨发表于 2023-08-27 15:49:00
    love 0

    饿了么表格性能一直是有些问题的,特别是使用了固定列,表格会把固定列克隆出来一份,这样会导致渲染很多冗余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 组件性能提升了十倍,里面的思路也可以借鉴一下。



沪ICP备19023445号-2号
友情链接