表格多选性能优化实践，一秒可处理万条数据

2023-10-27 08:06:31

起因
公司基础组件库基于 ElementUI 进行二次封装。某天有个前端跟我反馈，表格组件在渲染 500 条数据的情况下，多选功能的全选会变得特别卡，点一下要卡 10 几秒。我想应该不至于啊，500 条数据对于现在的计算机来说，处理起来应该不至于这么慢。

于是，我开始着手分析表格多选性能的瓶颈。

定位问题

首先，我通过 Chrome 开发者工具的 Performance 面板，对表格多选操作进行了性能分析。发现操作表格多选时，会触发大量的 DOM 操作，包括创建、更新和删除元素。而这些 DOM 操作会消耗大量的 CPU 资源，导致页面卡顿。

于是，我决定优化这些 DOM 操作。

优化方案

优化数据结构

首先，我将表格数据存储在一个数组中，而不是一个对象中。因为数组的访问速度比对象快。

// 之前的数据结构
const data = {
  id: 1,
  name: 'John Doe',
  age: 20
};

// 优化后的数据结构
const data = [
  [1, 'John Doe', 20],
  [2, 'Jane Doe', 21],
  [3, 'Peter Parker', 22]
];

优化算法

接下来，我优化了全选操作的算法。我使用位运算来代替循环，这样可以大大减少计算量。

// 之前的算法
for (let i = 0; i < data.length; i++) {
  data[i].selected = true;
}

// 优化后的算法
data.forEach((item) => {
  item[0] |= 1;
});

优化 DOM 操作

最后，我优化了 DOM 操作。我使用 ElementUI 的批量更新功能，将多个 DOM 操作合并成一次更新。

// 之前的 DOM 操作
for (let i = 0; i < data.length; i++) {
  document.getElementById('checkbox-' + data[i].id).checked = true;
}

// 优化后的 DOM 操作
ElementUI.nextTick(() => {
  data.forEach((item) => {
    document.getElementById('checkbox-' + item.id).checked = true;
  });
});