Как лучше выводить список на страницу?

Question

[sundrey]

Необходимо выводить список на страницу с ее последующей обработкой.
Часто список насчитывает более 1000 строк и на слабых машинах, страница начинает тормозить.
При этом в списке используются сортировки, есть кнопки и инпуты.
Сейчас это все работает через ul и li
Так вот, задался вопросом, какой вывод будет менее требователен к ресурсам?
Переписать все просто на блоки, или может старый добрый table будет куда быстрее обрабатываться и выводиться?

Comments

[Евгений Корначев]

А пагинация?

[sundrey]

Евгений Корначев, К сожалению нет, надо сразу все.
При этом нельзя кэшировать данные на сервере (Будет очень большая нагрузка), так как они берутся по внешнему запросу, с множества источников, и происходит это очень часто. Большая часть обработки перенесена на frontend

[sundrey]

Поэтому пока ищу, какой DOM браузер будет обрабатывать как можно быстрее

[ⓒⓢⓢ]

https://www.datatables.net/ ?
И пагинация на стороне клиента, и рендерить новые строки по мере скролла

[sundrey]

JRK_DV,
Как вариант, протестирую производительность, спасибо.
Пока переделал на table, отрисовка, и сортировка стала раза в 3 быстрее. Так что пока оставляю этот вариант. Видимо все таки table меньше нагружает движок. Да и нужда в части стилей отпала, что в таблицах идет по дефолту
Теперь даже 7600 строк нормально отображаются, и сортируются на стареньком компе

Answer 1

[sundrey]

Самым быстрым способом отображения и сортировки списков, если все элементы уже загружены в DOM, оказался table.

Дольше всех обрабатывался такой формат
<ul><li><span></span><span></span></li><ul>
Средним по скорости оказался
<div><span></span><span></span></div>
И самым быстрым
<table><tr><td></td><td></td></tr></table>

Эти результаты при 2000+ строк и 7 (span или td) в каждой. На меньшем количестве DIV и table почти не отличаются на скорости.

Если же, одновременное отображение всего списка не критично, то https://www.datatables.net/ вполне подходит.
Он держит всю таблицу в памяти, не выводя в DOM и формирует его только после запроса.
Инструмент очень полезный, и скорее всего буду переходить на него.