如何在下拉列表中插入约300个项目(不影响性能)?

时间:2015-05-06 13:15:06

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

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

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

但是这段代码影响了性能。如果没有重复列表,请告诉我任何方法。

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

提前致谢。

3 个答案:

答案 0 :(得分:1)

这实际上取决于您的应用程序中的可用性。例如,您可以使用1ms间隔运行的计时器,一次插入一个元素。因此构建选择需要300ms。这将导致300ms的延迟,直到数据准备好;但它不会打断UI线程。

另一种方法是使用DocumentFragment代替。这可以通过首先将所有项目附加到fragment,然后将片段附加到DOM树 - 仅导致 ONE dom-manipulation而不是 300 。< / p>

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

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

答案 1 :(得分:0)

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

答案 2 :(得分:0)

试试这个,

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

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