添加含Select2组件的表格行时jQuery性能极差，寻求优化方案

嘿，这个问题我之前帮不少开发者踩过坑——Select2确实在批量渲染多行表格的时候容易拖垮性能，毕竟每行一个Select2实例，背后要做的DOM操作、事件监听和数据处理可不少。针对你要支持200-300行的场景，下面是几个亲测有效的优化方案：

1. 延迟初始化Select2（按需渲染） #

这是最有效的一招！别在新增行的时候立刻给每个下拉框都初始化Select2，而是等用户真正点击该行的下拉框时再实例化。这样只有用户交互到的下拉框才会加载Select2的逻辑，初始渲染的压力直接降为0。

实现思路很简单：

• 新增行时，给<select>标签加个标记类，比如select2-pending
• 绑定全局点击事件，触发时初始化这个下拉框，然后移除标记避免重复初始化

代码示例：

// 全局监听未初始化的下拉框点击
$(document).on('click', '.select2-pending', function() {
  const $select = $(this);
  $select.removeClass('select2-pending').select2({
    placeholder: '请选择',
    width: '100%'
    // 你的其他Select2配置
  });
});

// 新增行的逻辑（简化版）
function addRow() {
  const newRow = `<tr><td><select class="select2-pending">...</select></td></tr>`;
  $('#table-body').append(newRow);
}

2. 共享全局数据源（避免重复创建） #

如果所有行的Select2下拉选项都是一模一样的，千万别每次新增行都重新定义一遍数据源！把选项数据存在全局变量里，所有Select2实例共享它，能省不少内存和初始化时间。

代码示例：

// 全局只定义一次数据源
const globalSelectOptions = [
  { id: 1, text: '选项A' },
  { id: 2, text: '选项B' },
  // ...更多选项
];

// 初始化Select2时直接用全局变量
$(document).on('click', '.select2-pending', function() {
  $(this).removeClass('select2-pending').select2({
    data: globalSelectOptions,
    placeholder: '请选择'
  });
});

3. 禁用不必要的搜索功能 #

如果你的下拉选项数量不多（比如少于50个），直接关掉Select2的搜索框！搜索功能会带来实时过滤、输入监听等额外逻辑，禁用后每个实例的性能开销能降一大截。

只需要在配置里加一行：

$(this).select2({
  minimumResultsForSearch: Infinity, // 彻底禁用搜索
  // 其他配置
});

4. 虚拟滚动处理大量下拉选项 #

如果你的下拉选项本身就有几百个，那即使延迟初始化，打开下拉框的时候还是会卡。这时候给Select2加个虚拟滚动——只渲染当前可见的选项，而不是把所有选项都塞进DOM里。

实现方式：

• 自定义Select2的dropdownAdapter，替换默认的下拉菜单渲染逻辑
• 结合轻量的虚拟滚动逻辑，监听下拉框的滚动事件，动态渲染可见区域的选项
• 核心思路是：只在视口范围内渲染选项，滚动时更新渲染的内容，避免一次性生成几百个<li>标签

5. 批量操作减少DOM重排 #

如果业务要求必须提前初始化所有Select2（比如需要默认选中值），那别一行一行加一行一行初始化。先批量把所有要加的行都插入到表格里，再一次性初始化所有Select2，这样能减少多次DOM重排的开销。

示例逻辑：

function addBatchRows(count) {
  let rowsHtml = '';
  // 先批量生成HTML
  for(let i=0; i<count; i++) {
    rowsHtml += `<tr><td><select class="to-init-select2">...</select></td></tr>`;
  }
  // 一次性插入DOM
  $('#table-body').append(rowsHtml);
  // 一次性初始化所有Select2
  $('.to-init-select2').select2({
    data: globalSelectOptions,
    // 配置
  }).removeClass('to-init-select2');
}

6. 销毁实例避免内存泄漏 #

别忘了删除行的时候要先销毁对应的Select2实例！如果只删DOM不销毁实例，会留下大量无用的事件监听和DOM节点，时间长了页面肯定会越来越卡。

代码示例：

function deleteRow($row) {
  // 先销毁该行所有Select2实例
  $row.find('.select2').each(function() {
    $(this).select2('destroy');
  });
  // 再删除DOM行
  $row.remove();
}

内容的提问来源于stack exchange，提问作者Ale TheFe