jQuery $.each 真的很慢答案

【问题标题】：jQuery $.each is really slowjQuery $.each 真的很慢
【发布时间】：2013-04-16 09:24:04
【问题描述】：

我正在尝试使用$.each 和$('<OPTION>') 构建一个动态组合框，但是在 IE 上真的很慢（服务器响应后需要 3/4 分钟来呈现数据）在 firefox 和其他浏览器上很好。

这是我构建组合的代码

var sel = ('#myDynCmb');
$.each(dataCollection, function(key,_value) {
    sel.append($("<OPTION>").val(key).text(_value));
});

任何帮助表示赞赏。

【问题讨论】：

这里有任何错误或滥用 jquery 吗？
dataCollection的值是多少？
是json对象（服务器的响应），里面的值不超过20个
这段代码没有问题，见jsfiddle.net/rR6GQ/1/embedded/result（在IE8中非常快）
您是否尝试过 for 循环。 $.each 是慢，见this question

标签： jquery ajax internet-explorer

【解决方案1】：

Dom 操作通常很慢，尤其是当您附加到 dom 时。

一个好的做法是将你所有的 html 放入一个 var 中，并将这个 var 的内容附加到 dom 中，从而产生一个 dom 操作，这样更快

var htmlToAppend = "<select>";
$.each(dataCollection, function(key,_value) {
    select += "<option value="+key+">"+_value+"</option>";
});
htmlToAppend += "</select>";
$('#myDynCmb').empty().append(htmlToAppend);

类似的东西

【讨论】：

【解决方案2】：

这可能是 IE 上的渲染问题（通常在 DOM 操作上很慢）。

你可以试试这样的：

var dummyList = $("<select />");
$.each(dataCollection, function(key,_value) {
    dummyList.append($("<option />").val(key).text(_value));
});
$('#myDynCmb').empty().append(dummyList.find('option'));

因此，您将选项加载到虚拟列表中（不在 DOM 中），然后将所有元素添加到列表中（在 DOM 中）。

【讨论】：

【解决方案3】：

尝试所有解决方案，但速度仍然慢得令人尴尬，所以我必须将其切换到经典 javascript，新选项，现在速度超级快

【讨论】：