Как улучшить производительность 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() будет быстрее? Любые другие идеи?

Я использую Chromium на Ubuntu. (Версия 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. Когда видимость изменяется от скрытого до видимого, браузеру не нужно пересчитывать макет.