在jQuery中，如何高效地添加大量元素？

我目前有一個真空發生器的草圖。雖然它工作正常，但速度很慢。我使用jQuery將每個布爾值組合添加到<table>。對於每個值，通過jQuery創建一個<td>元素，然後將其添加到<table>。此外，我使用的是一個漂亮的按鈕集而不是單選按鈕的jQuery UI。在jQuery中，如何高效地添加大量元素？

在我的發佈代碼提取中，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進行優化？或者在這種情況下表格可能不是最好的解決方案？
它可能暫停繪圖，因爲這可能會放緩一切？

來源

2011-03-24 pimvdb

儘量避免在循環中使用.append，特別是如果您添加了很多元素。這永遠是一個性能殺手。

更好的選擇是在循環完成時用標記構建一個字符串並做一個（或儘可能少）.append。

我看到您使用的是.data，這使事情變得更復雜一些，但另一種選擇是使用metadata插件將結構化標記附加到現有標記。

來源

2011-03-24 16:23:45 ScottE

要延遲渲染，你可以嘗試創建一個新表，而不將其添加到DOM，如：

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

然後添加你的行到該表：

myDisconnectedTable.append(...)

你的表，則追加到div你想要它在：

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

我不知道它會幫助，但值得一試。

來源

2011-03-24 16:29:31

在jQuery中，如何高效地添加大量元素？

回答

相關問題