Select2 v4本地分页/无限滚动优化：1.6万条数据加载过慢求助

兄弟，我太懂你这种加载上万条数据把页面卡到无响应的痛苦了！之前我也踩过类似的坑，给你分享几个亲测有效的优化思路：

1. 放弃手动循环追加DOM，用Select2原生的data选项加载数据 #

你现在的做法是AJAX拿到数据后手动拼接<option>再追加到DOM，这是性能瓶颈的核心——频繁的DOM操作会触发浏览器多次重排重绘，16000条数据的话这个开销会爆炸。

直接把AJAX返回的数组转换成Select2需要的格式（id+text字段），然后通过data选项传给Select2，它内部会高效处理渲染：

$('#select').select2({
  placeholder: "Select",
  data: [] // 先初始化空数据
});

$.ajax("/Example/Data", { type: 'GET' })
.success(function (data, status, xhr) {
  // 把你的数据转换成Select2需要的结构（如果后端返回的已经是id+text就不用转）
  const select2Data = data.map(item => ({
    id: item.id, // 替换成你数据里的唯一标识字段
    text: item.name // 替换成你要显示的文本字段
  }));
  
  // 直接给Select2设置数据，而不是操作DOM
  $('#select').select2('data', select2Data, true);
});

2. 最优解：改用Select2的AJAX远程搜索+后端分页 #

16000条数据完全没必要一次性加载给用户——没人会下拉翻一万多条选项。让后端支持关键词搜索+分页，前端只在用户输入关键词或者滚动下拉时请求对应的数据，每次只加载几十条，速度瞬间起飞。

示例代码：

$('#select').select2({
  placeholder: "Select",
  ajax: {
    url: "/Example/Data",
    type: 'GET',
    delay: 250, // 输入防抖，避免频繁请求
    data: function (params) {
      return {
        keyword: params.term, // 用户输入的搜索关键词
        page: params.page || 1, // 当前页码，默认第一页
        pageSize: 50 // 每页加载50条，按需调整
      };
    },
    processResults: function (data, params) {
      // 后端需要返回分页数据：比如{ items: [...], total: 16000 }
      params.page = params.page || 1;
      return {
        results: data.items.map(item => ({id: item.id, text: item.name})),
        pagination: {
          more: (params.page * 50) < data.total // 是否还有更多数据
        }
      };
    },
    cache: true // 开启缓存，相同关键词不再重复请求
  }
});

这个方案不仅解决加载慢的问题，还能节省带宽，用户体验也更好。

3. 其他小优化 #

• 关闭不必要的动画：给Select2加个禁用动画的类，减少渲染开销：

  $('#select').select2({
    dropdownCssClass: 'select2-no-animation',
    // 其他配置...
  });
  

  对应的辅助CSS（可选）：

  .select2-no-animation .select2-results__options {
    transition: none !important;
  }
  

• 禁用搜索框（如果不需要）：如果用户不需要搜索功能，加上minimumResultsForSearch: Infinity，减少不必要的渲染逻辑：

  $('#select').select2({
    minimumResultsForSearch: Infinity,
    // 其他配置...
  });
  

为什么你的原代码慢？ #

你原代码里的循环追加<option>是最致命的——每一次append()都会让浏览器重新计算DOM布局和绘制，16000次操作的累积开销直接导致页面卡顿甚至假死。而Select2内部处理数据时会批量操作DOM，或者在远程分页时用虚拟滚动，性能差距非常大。

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