多个 Bootstrap-select 加载非常缓慢

Question

当我在网站上尝试放置多个选择器（超过20个）时，它会减慢jQuery执行速度（伴随着停止/继续警报）。有没有可能优化代码以更快地加载它？它需要几分钟的时间才能加载。

示例代码：

<td><select class="selectpicker" name="ref[240][sub_class]">
<option value=0 selected="selected" >A</option>
<option value=1>B</option></select></td>
<td><select class="selectpicker" name="ref[265][sub_class]">
<option value=0>A</option>
<option value=1 selected="selected" >B</option></select></td>

在文件末尾使用JavaScript：

        $(document).ready(function() {
  $('.selectpicker').selectpicker({
    style: 'btn-info',
    size: 1
  });
});

- rangerek

---

以下是其他遇到过 #bootstrap-select 问题的人发布的帖子，可能会有所帮助： https://github.com/silviomoreto/bootstrap-select/issues/291 - Mike Burati

对我来说也很慢，但我使用的是较旧的版本-1.6。 大约1300个选项需要在刷新时花费3-4秒钟... 切换到版本1.13后，刷新是瞬间完成的。 - Koshera

Answer 1

在我的情况下，简单地采取这种方法也是完全可以的。

 $('.selectpicker').selectpicker();

超出

$(document).ready(function() ...

- VGranin

Answer 2

我也使用了Bootstrap Select插件。这个技巧解决了页面加载时bootstrap-select渲染延迟的问题：似乎在页面加载时，DOM元素通常在selectpicker之前呈现，这会导致CSS“重新缩放”，从而产生可怕的效果。

通常情况下，selectpicker需要500毫秒进行第一次渲染，您可以遵循以下方法在元素定义后强制渲染，以避免此延迟：

<select class="selectpicker" id="your_select">
   <option>...</option>
   ...
   <option>...</option>
</select>
<script>
   $("#your_select").selectpicker("render");
</script>

猜想它有帮助:)

- GrayFox

Answer 3

对我而言，在 js 加载后立即强制渲染使得 select 几乎瞬间出现，而不需要等待整个页面加载：

<script src="~/assets/js/bootstrap-select.min.js"></script>
<script>
    $(".selectpicker").selectpicker();
</script>

- Alfred Wallace

---

作为注释，由于其对性能的影响，我最终没有使用Bootstrap-Select。由于SEO的原因，我不得不选择功能而非美观。 - Alfred Wallace

嗨，你用了什么方法代替呢？我现在的情况是有20,000个选项，加载很慢:( - Ingus

@Ingus - 我使用了基本的<select>元素，因为我只有5个选项。你看过预测搜索吗？https://ux.stackexchange.com/questions/52266/what-are-alternatives-to-a-large-drop-down-select-list - Alfred Wallace

我找到了其他适合我的需求的方法，但将来仍会检查您的建议。谢谢！ - Ingus

Answer 4

对我来说，这是Bootstrap冲突的问题。 我在CMS Joomla中使用它，因此我从CMS中加载了与Bootstrap冲突的另一个文件。 当我删除重复的文件后，一切开始正常工作。

敬礼， OrdaSoft团队

- Ordasoft Ordasoft

---

感谢您分享团队的解决方案，但是我认为如果没有更多关于您遇到和解决的确切问题的详细信息以及这与问题的关系，这个答案对问题的回答并不是很清晰。 - Dean Whitehouse