在 jQuery 中，如何有效地添加大量元素？答案

【问题标题】：In jQuery, how to efficiently add lots of elements?在 jQuery 中，如何有效地添加大量元素？
【发布时间】：2011-07-22 06:51:10
【问题描述】：

我目前有一个真值表生成器的草图。虽然它工作正常，但它相当慢。我使用 jQuery 添加到 <table> 的每个布尔值组合。对于每个值，jQuery 创建一个<td> 元素，然后添加到<table>。此外，我使用 jQuery UI 来制作漂亮的按钮集，而不是单选按钮。

在我发布的代码摘录中，table 是一个包含每个布尔组合的数组。也许我的代码有点难以理解，但它基本上归结为使用 4 个布尔变量（16 种可能性），创建了 96 个 <td> 元素，并添加了类并设置了 data 属性。在第二部分中，创建了三组三个单选按钮并将其转换为一个 jQuery UI 按钮集。

使用计时器我发现大约需要 0.4 秒才能填满所有内容。没什么大不了的，但它确实很明显，并且对用户没有积极影响，因为每次他输入不同的布尔公式时，都需要半秒钟的时间来加载。

$table = $('#table');
$.each(table, function(k, v) {
    $tr = $('<tr>').addClass('res').data('number', k);
    $.each(v[0], function(k2, v2) {
        $td = $('<td>').text(v2).addClass(v2 ? 'green notresult' : 'red notresult');
        for(var i = 0; i < 4; i++) {
            $td.data(i, i === k2);
        }
        $tr.append($td);
    });
    $tr.append($('<td>').addClass('spacing'));
    $table.append(
        $tr.append(
            $('<td>').text(v[1]).addClass(v[1] ? 'green result' : 'red result')
        )
    );
});

// ... here is some code that's not slowing down

$radiobuttonsdiv = $('#radiobuttonsdiv');
for(var i = 0; i < 4; i++) {
    var $radiobase = $('<input>').attr('type', 'radio')
                                .attr('name', 'a'+i)
                                .click(handleChange);
    // .label() is a custom function of mine which adds a label to a radio button
    var $radioboth = $radiobase.clone().val('both').label();
    var $radiotrue = $radiobase.clone().val('true').label();
    var $radiofalse = $radiobase.clone().val('false').label();
    var $td1 = $('<td>').addClass('varname').html(i);
    var $td2 = $('<td>').attr('id', i);
    $td2.append($radioboth, $radiotrue, $radiofalse).buttonset();
    var $tr = $('<tr>').append($td1, $td2);
    $radiobuttonsdiv.append($tr);
}

我的问题是：

如何优化使用 jQuery 的表格填充？或者在这种情况下，表格可能不是最佳解决方案？
是否可以暂停绘图，因为这可能会减慢一切？

【问题讨论】：

标签： javascript jquery dom performance

【解决方案1】：

尽量避免在循环中使用 .append，尤其是在添加大量元素时。这始终是性能杀手。

更好的选择是使用标记构建一个字符串，并在循环完成时执行一个（或尽可能少的）.append。

我看到您正在使用 .data，这使事情变得有点复杂，但另一种选择是使用 metadata 插件将结构化标记附加到现有标签。

【讨论】：

【解决方案2】：

要延迟渲染，您可以尝试创建一个新表而不将其添加到 DOM 中，例如：

var myDisconnectedTable = $('<table></table>')

然后将您的行添加到该表中：

myDisconnectedTable.append(...)

然后将您的表格附加到您想要的div：

$('#idOfMyDiv').append(myDisconnectedTable)

我不知道这会有所帮助，但值得一试。

【讨论】：