Как лучше всего для производительности реализовать список в котором может быть больше 10к элементов?

Question

[bpGusar]

В проекте есть список в который через цикл добавляются элементы, их может быть очень много.
Этот список должен быть представлен на странице, но если сделать его в виде ul li или в div засовывать элементы в виде списка или в textarea то после примерно 4к элементов страница начинает сильно лагать, с остальными элементами страницы сложно взаимодействовать.

Как такой список можно реализовать но что бы он оказывал минимальное влияние на производительность?

Comments

[sim3x]

Как в таком списке юзер будет ориентироваться?

[bpGusar]

sim3x, Это не важно, он просто должен быть

[sim3x]

bpGusar, нет
Если юзер не выбирает, то ваш список просто не существует на фронте

[bpGusar]

sim3x, мне можно не доказывать, докажи заказчику )

[Сергей delphinpro]

bpGusar, Заказчику вы, как специалист, должны доказывать, что идея вывалить 10к элементов на страницу — полное гавно.
Но даже если переубедить не получится, никто не заставляет вас реально вываливать 10к. Как там ниже упомянули — обновляйте список по частям, по мере прокрутки добавляйте новые элементы, и удаляйте старые. В область просмотра все равно больше сотни-двух не влезет.

[sim3x]

bpGusar, заказчику не нужно ничего доказывать - у него ТЗ есть

В ТЗ указано, что ему требуется лист на 10к позиций?
- сделайте ему такй лист и попросите его за 1 секунду выбрать последний 9к-ый елемент, потом рандомный и так в течении минуты

Тогда в ТЗ появится уточнение, что и как сделать

Answer 1

[Игорь]

Посмотрите как сделано у react-virtualized можно хоть 1000000 без лагов.

Answer 2

[Denis Melnikov]

Подгрузка, пагинация...

Answer 3

[Антон Спирин]

Optimizing Performance: Virtualize Long Lists