在jQuery中,如何有效地添加大量元素？

Question

我目前有一个真实的发电机草图.它工作正常,但速度很慢.我添加到<table>使用jQuery的每个布尔值组合.对于每个值,一个<td>元素由jQuery创建,然后添加到<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的表填充？或者表格可能不是这种情况下的最佳解决方案？
• 是否有可能暂停绘图,因为这可能会减慢一切的速度？

Answer 1

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

一个更好的选择是使用标记构建一个字符串,并在循环结束时执行单个(或尽可能少的).append.

我看到你正在使用.data,这使得事情变得更复杂,但另一种选择是使用元数据插件将结构化标记附加到现有标签.