jquery - JQuery用大量数据填充选项标签会导致浏览器崩溃

Question

当我使用以下代码时

var html = "";
$.map(data.modelTypes, function (item) {
    html+= "<option>" + item.type + "</option>";
});
$("#drowdown").html(html);

有太多的 HTML 我的 javascript 必须添加到 $("#dropdown") 元素它会使任何浏览器崩溃几秒钟，最后它可以正常工作并填满下拉列表但无论如何让我的浏览器不会崩溃？

Answer 1

不要连接必须解析的巨大字符串，创建实际元素并放入选择中：

var options = $.map(data.modelTypes, function (item) {
  return $('<option>', { text: item.type })[0];
});
$("#drowdown").empty().append(options);

注意：您使用的是mapas 方法，您应该在函数中返回值，然后您将获得从该方法each返回的值的数组。map

编辑：

一些测试表明，使用更普通的 Javascript 而不是使用 jQuery 来循环和创建元素可以使其速度提高一倍：

var options = [];
for (var i =0; i < data.modelTypes.length; i++) {
  var o = document.createElement('OPTION');
  o.text = data.modelTypes[i].type;
  options.push(o);
}
$("#drowdown").empty().append(options);

在我的 Firefox 计算机上，这会在一秒钟左右添加 1000000 个选项元素。

无论如何，如果你有这么多选择，你可能应该重新考虑 UI ......

Answer 2

javascript 中使用 StringBuffer 代替字符串连接

Javascript中的字符串连接与字符串缓冲区

字符串连接是非常慢的操作。您必须使用字符串缓冲区。

function StringBuffer() {
this.__strings__ = new Array;
}

StringBuffer.prototype.append = function (str) {
    this.__strings__.push(str);
};

StringBuffer.prototype.toString = function () {
    return this.__strings__.join("");
};


StringBuffer.prototype.empty = function(){
    this.__strings__.length = 0;
};

Answer 3

不确定这是否会为您加快速度，但为什么不直接附加到下拉列表中呢？

$.each(data.modelTypes, function(i, value) {
        $('#drowdown').append($('<option>').text(value).attr('value', value));

由于在您的情况下您有大量项目，您可能需要考虑使用 DocumentFragment。类似的东西：

var dropdown= $("#drowdown").empty();

var frag = document.createDocumentFragment();
data.modelTypes.each( function(item) {
    frag.appendChild($('<option>').text(item).attr('value', item));
});

dropdown.append(frag);

Answer 4

首先是 $.map 的使用。与来自 JS 的 for 相比，它的性能有所不同。另一件事是 .html 的使用。推荐，但是如果你有很多数据，浏览器JS解释器会阻塞几秒钟。为什么不使用 append 在循环中一次添加一个选项？

for (i = 0; i < data.modelTypes.length; i++) {
  $("#drowdown").append("<option>"+data.modelTypes[i].type+"</option>")); 
}

这有点伪代码，不知道它是否编译，但这是我的两分钱。除此之外，HTML 结构的动态更改总是很繁重，但是您可以通过依赖字符串而不是 JS vars 或 jquery 对象来缓解这种情况。