在jQuery中，如何有效地添加大量元素？
我目前有一个真实的发电机草图。 虽然它工作正常，但它很慢。 我使用jQuery添加到
每个布尔值组合。 对于每个值，
元素由jQuery创建，然后添加到
。 而且，我正在使用jQuery UI来获得漂亮的按钮而不是单选按钮。
在我发布的代码提取中， table是一个包含每个布尔组合的数组。 也许我的代码有点不可思议，但它基本上归结为4个布尔变量（16种可能性），96个
元素是在添加了类和data属性集的情况下创建的。 在第二部分中，创建三组三个单选按钮并将其转换为jQuery UI按钮组。
使用计时器我发现在所有东西都填满之前需要大约0.4秒。 没有那么大的交易，但它肯定是显而易见的，并没有对用户产生积极的影响，因为每次他输入一个不同的布尔公式，它需要半秒钟加载。
$table = $('#table'); $.each(table, function(k, v) { $tr = $('').addClass('res').data('number', k); $.each(v[0], function(k2, v2) { $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($(' | ').addClass('spacing')); $table.append( $tr.append( $(' | ').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 = $('').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 = $(' | ').addClass('varname').html(i); var $td2 = $(' | ').attr('id', i); $td2.append($radioboth, $radiotrue, $radiofalse).buttonset(); var $tr = $(' | ').append($td1, $td2); $radiobuttonsdiv.append($tr); }
我的问题是：
- 如何优化使用jQuery的表填充？ 或者表格可能不是这种情况下的最佳解决方案？
- 是否可能暂停绘图，因为这可能会减慢一切的速度？
尽量避免在循环中使用.append，尤其是在添加大量元素时。 这始终是一个性能杀手。
一个更好的选择是使用标记构建一个字符串，并在循环结束时执行单个（或尽可能少的）.append。
我看到你正在使用.data，这使事情变得更复杂，但另一种选择是使用元数据插件将结构化标记附加到现有标签。
要延迟渲染，您可以尝试创建新表而不将其添加到DOM，如：
var myDisconnectedTable = $('')
然后将行添加到该表：
myDisconnectedTable.append(...)
然后将表格附加到您想要的div中：
$('#idOfMyDiv').append(myDisconnectedTable)
我不知道它会有所帮助，但它值得一试。
| |