Skip to content

Table 性能优化

针对 element-plus 的 table 组件的性能优化,减少 80% 渲染耗时

场景

自定义列全部勾选的场景下(20 行 x 180 列),列表中的开关切换,预期为 400-500 毫秒,然而由于数据量大的原因,总体渲染时间竟然达到了 7-8 秒!这对用户的体验无疑是致命的!优化的可行性分析

TableFrame - 原生

首先我们先来看看原生的 element-plus 提供的 el-table 组件的具体性能表现

当前显示:20行180列, 显示/隐藏 table:

test

平均渲染时间在 7.3s 左右

LocalEditTableFrame - 优化

再来看看我们修改了其源码后的 el-table 组件的具体性能表现

当前显示:20行180列, 显示/隐藏 table:

test

平均渲染时间在 1.5s 左右

具体实现

详情见源码仓库