jquery - jQuery $.each 真的很慢

Question

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

这是我构建组合的代码

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

任何帮助表示赞赏。

Answer 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);

类似的东西

Answer 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 中）。

Answer 3

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