bootstrap-select大量选项场景下拉滚动冻结如何修复

问题现象 #

配置1000个选项的bootstrap-select下拉组件（开启实时搜索功能），滚动下拉列表时仅向下浏览约60个选项就会出现页面冻结、无法继续滚动的问题，基础实现代码如下：

<select class="selectpicker" data-live-search="true">
  <option>0</option>
  <option>1</option>
  <option>2</option>
  <!-- 剩余共1000个下拉选项 -->
  <option>1000 more down</option>
</select>

故障原因 #

bootstrap-select默认会将所有配置的option节点一次性渲染为下拉面板里的li元素，千级DOM节点本身就会带来极高的渲染内存开销；开启实时搜索后，滚动过程中组件会持续触发选项匹配、高亮状态计算的逻辑，当滚动位置超出初始预渲染的60个可视节点范围时，浏览器渲染线程被大量计算和重绘任务阻塞，直接触发滚动冻结。

修复方案 #

• 开启内置虚拟滚动（最优方案，无业务侵入）
  1.13.0及以上版本的bootstrap-select已经内置虚拟滚动能力，开启后组件仅会渲染当前可视区域内的选项节点，滚动时动态替换渲染内容，从根本上减少DOM节点数量和计算开销，哪怕加载上万条选项也不会出现卡顿。
  静态属性配置方式直接在select标签上添加对应属性即可：

  <select class="selectpicker" data-live-search="true" data-virtual-scroll="true">
    <option>0</option>
    <option>1</option>
    <option>2</option>
    <!-- 剩余共1000个下拉选项 -->
    <option>1000 more down</option>
  </select>
  

  如果是通过JS初始化组件，直接在配置项中加入虚拟滚动开关：

  $('.selectpicker').selectpicker({
    liveSearch: true,
    virtualScroll: true,
    // 一般不需要手动配置，组件会自动计算单个选项高度
    // virtualScrollItemSize: 30
  });
  

• 旧版本兼容优化（无法升级组件版本时使用）
  如果使用的是1.13.0以下的旧版本，没有内置虚拟滚动，可以通过两个方向优化：
  1. 关闭冗余动效：初始化时配置animate: false，去掉下拉面板的过渡动画、选项hover/选中的复杂阴影、滤镜效果，降低滚动重绘成本
  2. 分页加载选项：首次渲染仅加载前50-100个选项，监听下拉面板的滚动事件，滚动到面板底部时动态追加下一批选项节点，避免一次性渲染上千个DOM
• 冲突排查
  如果开启虚拟滚动后仍有卡顿，检查页面是否有全局脚本绑定了高频触发的scroll事件回调，回调中存在大量DOM操作逻辑抢占主线程，同时排查是否给下拉选项添加了会触发强制重绘的复杂CSS属性。

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