如何插入大约 300 项到下拉列表（不影响性能）？

Question

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

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

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

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

提前致谢。

Answer 1

除了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>

Answer 2

试试这个，

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

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

Answer 3

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

另一种方法是使用 DocumentFragment。这通过首先将所有项目附加到 fragment，然后将片段附加到 DOM-树来实现 - 只导致 ONE dom- 操作共 300.

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

不幸的是，第四种选择只有上帝知道。

如何插入大约 300 项到下拉列表（不影响性能）？

How to insert about 300 items to drop down list (without affecting performance)?

html

performance

jquery

backbone.js

underscore.js