如何提高附加圖標的jQuery性能？

Question

我正在用jQuery構建一個電子表格編輯器，並遇到大表的性能問題。 該表包含許多數據集，當單擊一個時，圖標將添加到其他集的第一個單元格中。代碼如下所示：

$('.click_icon').remove(); 
for (var i = 0; i < datasets.length; i++) { 
    var first_cell = $('td.content[dataset="' + datasets[i].id + '"]').filter(':first'); 
    if (in_group(datasets[i].id)) { 
    first_cell.append('<i class="icon-remove click_icon remove_group" style="float:right"></i>'); 
    } else { 
    first_cell.append('<i class="icon-magnet click_icon add_group" style="float:right"></i>'); 
} 

與500多個數據集，這大約需要5秒鐘。 in_group()只是一個小函數，用於檢查該集是否在具有選定數據集的組中。

我在想，如果在點擊之前創建圖標並使用show() hide()會更快？任何其他想法？

我在Ubuntu上使用Chromium。 （版本28.0.1500.52 Ubuntu 12.04）

Answer 1

建表在內存中，只有改變DOM一次：

$('.click_icon').remove(); 
var table = $('table'); 
var clone = table.clone(true); 

for (var i = 0; i < datasets.length; i++) { 
    var _class = in_group(datasets[i].id) ? 
        'icon-remove click_icon remove_group' : 
        'icon-magnet click_icon add_group', 
     elem = $('<i />', {'class': _class, style:'float:right'}); 

    $('td.content[dataset="' + datasets[i].id + '"]', clone).filter(':first') 
                  .append(elem); 
} 

table.replaceWith(clone); 

這是一個普遍的例子，你可能需要調整本作它與你的標記正常工作。
我通常會使用純JS的性能和documentFragments，但我認爲jQuery在內部使用這種方式時會使用片段。

Answer 2

根據我的經驗，按字符串附加元素的性能最差，而不是DOM創建元素。

因此，嘗試這樣的事：

if (in_group(datasets[i].id)) { 
    var i = document.createElement('i'); 
    i.className = 'icon-remove click_icon remove_group'; 
    i.style.float = 'right'; 
    first_cell.appendChild(i); 
} 

Answer 3

如果您希望用戶點擊，我認爲在點擊之前創建圖標是個不錯的主意。

而不是顯示/隱藏切換顯示屬性，您可以使用visibility property。當可見性從隱藏變爲可見時，瀏覽器不需要重新計算佈局。