Как правильно сделать обработку большого количества элементов DOM?

Question

[WebDev]

Есть интернет магазин с 1000+ категорий. У каждой категории в скобочках указано количество товаров в этой категории. Также есть аякс фильтр. После изменения фильтра лишние товары убираются и у всех категорий нужно поменять количество цифр в скобках. С сервера ответ приходит быстро, а вот на клиенте эта операция отрабатывает пару секунд, причем весь интерфейс зависает на это время.
Ответ с сервера в формате

[{'product_id' : 'count'}, {'product_id' : 'count}]

Обхожу циклом и проставляю.
Как правильно обновить DOM в таком случае? Можно ли как-то запустить обновление DOM'a фоном? Допустимо, чтобы цифры в категориях обновлялись с задержкой. Как вы решаете такие задачи?

Answer 1

[Rsa97]

Судя по ответу сервера подозреваю, что вы пробегаете по этому массиву и для каждого product_id ищете элемент в DOM.
Может оказаться гораздо быстрее, если сервер отдаст ответ как один объект
{'product_id' : 'count', 'product_id' : 'count}
В таком случае можно сразу найти в DOM коллекцию нужных элементов и по их product_id брать count из объекта.

Comments

[WebDev]

Не совсем понял.
Вот такие образом обновляю дом

results.forEach(function(result) {
     list.find('[data-product-id="'+result.id+'"]').html(result.count);
});

[Алексей Ярков]

Что вы советуете?

var s = {'product_id' : 1, 'product_id' : 2};
alert(s.product_id);

И чему равен s.product_id? Правильно - 2!
Не может быть ключей с одинаковым именем у объекта.

[Дмитрий Беляев]

WebDev: Rsa97 имеет в виду, что стоит найти обновляемые элементы заранее и сохранить их в объекте, ключами которого будут id, а при обновлении просто брать по id элемент из этого объекта и обновлять, это будет гораздо быстрее

[WebDev]

Перед обработкой выбрал все элементы в словарь и теперь нахожу по ключам. Работает в 60 раз быстрее! Спасибо!

[Rsa97]

Дмитрий Беляев: Не совсем. Я предполагал, что product_id - это id конкретного продукта, то есть данные выглядели бы как {'16384':'2', '32767':'1'}. Тогда можно было бы сделать примерно так

$('.product_count').each(function() {
  if (typeof data[$(this).data('id')] !== 'undefined')
    $(this).text(data[$(this).data('id')]);
}

[WebDev]

Дмитрий Беляев: Rsa97: интересно, а что быстрее - выбрать все категории в объект

categories.each(function() {
  obj[$(this).attr('data-id')] = $this;
})

В этом случае можно вообще обходится без цикла для смены количества

obj[$(this).data('id')].text($(this).data('count')))

Второй вариант, предложенный Rsa97, в нем нужно хранить только идентификаторы, но обходить циклом каждый раз.

Answer 2

[trushka]

И ещё надо попытаться оптимизировать вёрстку - максимально избавиться от лишних обёрток, ато, бывает, понаверстают "матрёшек", а потом при любом изменении DOM браузер подвисает..