Jak optymalnie renderować duże ilości elementów DOM za pomocą javascript?

Na stronie internetowej mam dość dużą listę przedmiotów (np. Kart produktów, z których każda zawiera obraz i tekst) - około 1000 z nich. Chcę filtrować tę listę na kliencie (powinny być pokazywane tylko te elementy, które nie są odfiltrowane), ale występuje problem z wydajnością renderowania. Stosuję bardzo wąski filtr i pozostaje tylko 10-20 elementów, a następnie anuluję go (więc wszystkie elementy muszą być ponownie pokazane), a przeglądarka (Chrome na bardzo ładnym komputerze) zawiesza się na sekundę lub dwie.

Ponownie renderuję listę za pomocą następującej procedury:

<code>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")
}
</code>

Dict to skrót identyfikatorów dozwolonych przedmiotów

Ta funkcja działa natychmiast, renderowanie się zawiesza. Czy istnieje bardziej optymalna metoda ponownego renderowania niż zmiana właściwości „wyświetlania” elementów DOM?

Z góry dziękuję za odpowiedzi.

questionAnswers(3)

yourAnswerToTheQuestion