在jQuery中，如何有效地添加很多元素?

问题描述

我目前有一个真值表生成器的草图.虽然工作正常，但速度很慢.我已使用jQuery将布尔值的每种组合添加到<table>中.对于每个值，jQuery将创建一个<td>元素，然后将其添加到<table>中.而且，我正在使用jQuery UI来提供漂亮的按钮集，而不是单选按钮.

I currently have a sketch for a truthtable generator. While it works fine, it is rather slow. Each combination of boolean values I have added to a <table> using jQuery. For each value, a <td> element is created by jQuery and then added to the <table>. Moreover, I'm using jQuery UI for a nice looking buttonset instead of radio buttons.

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

In my posted code extract, table is an array containing each boolean combination. Perhaps my code is a little inscrutable but what it basically comes down to is that with 4 boolean variables (16 possibilities), 96 <td> elements are created with classes added and data attributes set. In the second part, three groups of three radio buttons are created and converted into a jQuery UI buttonset.

使用计时器，我发现大约需要0.4秒才能填满所有内容.没什么大不了的，但是它确实很引人注目，并且不会对用户产生积极的影响，因为每次用户输入不同的布尔值公式都需要花费半秒钟的时间.

Using a timer I figured out that it takes approximately 0.4 seconds before everything is filled up. Not that big of a deal, but it is certainly noticeable and does not have a positive effect on the user as each time he enters a different boolean formula it takes half a second to load.

$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的表格填充?还是在这种情况下表格不是最佳解决方案?
• 是否有可能暂停绘图，因为这可能会减慢一切速度?

推荐答案

尝试避免在循环中使用.append，尤其是在要添加很多元素的情况下.这始终是性能杀手.

Try to avoid using .append in a loop, especially if you're adding a lot of elements. This is always a performance killer.

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

A better option is to build up a string with the markup and do a single (or as few as possible) .append when your loop is finished.

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

I see that you're using .data, which makes things a bit more complicated, but another option is to use the metadata plugin to attach structured markup to existing tags.

这篇关于在jQuery中，如何有效地添加很多元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！