Как оптимально отображать большое количество элементов DOM с помощью javascript?

На веб-странице у меня есть довольно большой список элементов, (скажем, карточки товаров, каждая содержит изображение и текст)-около 1000 из них. Я хочу отфильтровать этот список на клиенте (должны отображаться только те элементы, которые не отфильтрованы), но возникает проблема с производительностью рендеринга. Я применяю очень узкий фильтр, и остается только 10-20 элементов, затем отменяю его (,поэтому все элементы должны отображаться снова), и браузер (Chrome на очень хорошей машине)зависает на секунду или две.

Я заново-отрисовываю список, используя следующую процедуру:

for (var i = 0, l = this.entries.length; i < l; i++) {
    $(this.cls_prefix + this.entries[i].id).css("display", this.entries[i].id in dict ? "block" : "none")
}

dict - это хэш идентификаторов разрешенных элементов

Сама эта функция запускается мгновенно, зависает рендеринг. Есть ли более оптимальный метод пере-рендеринга, чем изменение свойства display элементов DOM?

Заранее спасибо за ответы.

6
задан Alex Zaretsky 14 April 2012 в 05:45
поделиться