Как организовать быстрый поиск/фильтрацию на JS по готовому DOM-дереву?

Question

[Антон Щербаков]

Сервер отдает JSON, на основе которого я строю DOM-дерево. В конечном итоге получается примерно такая структура строки, которая легко может стать табличной. И таких строк может быть до десятка тысяч.

<div class="LineId Type" id="" style="">
	<span class="CodeId">code</span>
	<span class="NameRu">name ru</span>
	<span class="NameEn">name en</span>
	<span class="SerialNum">SerialNum</span>
	<span class="Qty">Qty</span>
	<span class="Scheme">Scheme</span>
	<span class="Link">Link</span>
</div>

Как организовать максимально производительный поиск по полям (например NameRu, NameEn, SerialNum)?

Сейчас проблема примерно такая. При попытке скрытия элементов, которые не удовлетворили условию поиска, с классом "LineId" (напоминаю, их может быть очень много), происходит "зависание" браузера из-за применения "display:none;". Все упирается в перерисовку DOM.

Может быть стоит отрисовать DOM с полным набором элементов, а при поиске - чистить родительский элемент, искать внутри JSON и исходя из результата заново строить DOM?

P.S. Плагины или решения гуглил, все что нашел с помощью гугла - не может нормально перемолоть большое количество элементов.
P.P.S. Дергать "кусками" данные от сервера не представляется возможным. По некоторым причинам.

Comments

[OVK2015]

Сервер отдает JSON
....
И таких строк может быть до десятка тысяч.

Надеюсь он не всю свою базу вам за раз отдает?

[Антон Щербаков]

OVK2015: Нет, отдает собрку под определенные параметры, по которой в дальнейшем будет производиться поиск. И строк может быть как и несколько сотен, так и около десятка тысяч.

Не выводить сборку нельзя, так как кроме поиска, может быть еще просмотр строк клиентом.
Думаете я не сообразил бы постучаться в базу и забрать искомое, а после выдать клиенту?

Вы лучше, вместо того, чтобы петросянничать, дали бы дельный совет, как победить этого монстра с 8*10000 элементов?

[OVK2015]

Антон Щербаков:
И в мыслях заниматься этой ... не было! Спросил, потому что предполагал, что сервер данные отдаст не по запросу типа SELECT *, а по какому-нибудь WHERE. Думаю, такой объем он выкинет при запросе по жанру или по годам.
Так вот. Зачем вам отрисовывать всю выборку, а потом с поиском по DOM заморачиваться, если можно все это тихо держать в объекте, в нем же и искать. Пользователь, да и браузер за раз простыню в 8*10000 эл-ов вряд ли осилит,- выдайте ему для начала какой-то разумный минимум, а там уже ищете в объекте и отображайте по его уточнениям

Answer 1

[Антон Щербаков]

Сам спросил, сам ответил.
Проблему решил с помощью плагина https://github.com/jiren/StreamTable.js и Mustache.js, который правда пришлось слегка допилить.

Заходит JSON с массивом, под уникальный номер сборки создается глобальная переменная, куда сохраняется массив (сборок может быть много). При вызове - данные передаются в StreamTable.js, вуаля! Даже если выводить за раз по 1000 строк (в плагине есть средства пагинации) из 50000 полученных, то поиск все равно происходит без каких-либо серьезных задержек.