如何在下拉列表中插入大约 300 个项目（不影响性能）？答案

【问题标题】：How to insert about 300 items to drop down list (without affecting performance)?如何在下拉列表中插入大约 300 个项目（不影响性能）？
【发布时间】：2015-05-06 13:15:06
【问题描述】：

我在网络服务调用中收到大约 300 个项目。我需要将它们添加到下拉列表中。我已使用以下下划线模板完成此操作：

<select>
<% _.each(data, function (item) { %>
<option><% print(item) %></option>
<% }); %>
</select>

但是这段代码会影响性能。请让我知道在不迭代列表的情况下执行此操作的任何方法。

注意：Backbone.js 和 underscore.js 在我的项目中使用。我也欢迎使用 javascript 和 jquery 的解决方案

提前致谢。

【问题讨论】：

它使用 underscore.js
如果你使用jquery，你最好使用你的循环来创建一个字符串，一旦你遍历它们，使用jquery插入整个东西，插入一个大选择每次插入一个选项会更好
干脆不要为 300 个项目使用选择框，那太傻了..
呵呵...但是客户希望我们提供这样一个选择框:(

标签： jquery html performance backbone.js underscore.js

【解决方案1】：

这真的取决于您的应用程序的可用性。例如，您可以让计时器以 1 毫秒的间隔运行，一次插入一个元素。因此构建选择需要 300 毫秒。这将在数据准备好之前引入 300 毫秒的延迟；但它不会中断 UI 线程。

另一种方法是使用DocumentFragment。这通过首先将所有项目附加到 fragment，然后将片段附加到 DOM 树 - 只导致 ONE dom-manipulation 而不是 300。

第三个选项是在服务器端生成标记。

不幸的是，第四个选项只有上帝知道。

【讨论】：

【解决方案2】：

除了 ajax、setTimeout 和 setInterval，没有什么可以在 JavaScript 中异步执行。

您需要考虑通过后端解决方案来做到这一点，或者只是尝试找到同步代码的最便宜的执行方式

虽然不是代码效率方面的专家，但我相信常规的 for 循环是打印项目数组的最快方法之一。

<script>
   var location = '#options'
   for(var i = 0; 0 < data.length; i++){
      $(location).append(data[i]);
   }

</script>

<option id="options">

</option>
</select>

【讨论】：

【解决方案3】：

试试这个，

var option = "";
$.each(data, function(i, item) {
  option += "<option>"+item+ "<option>";
});

$('select').append(option);

【讨论】：