LINUX.ORG.RU

html javascript рендеринг очень больших списков

 js html dom long list


0

1

есть элемент типа список, он в контейнере с кастомным скроллом. в списке может быть очень много айтемов, около 10 000. понятно, выводить их все и сразу не вариант, так как над самими элементами тоже происходят манипуляции (добавление-удаление); не могу нагуглить ничего по теме, в идеале нечто готовое, минимум подходы, кто как делает. хочется почерпнуть опыта, прежде чем писать влоб. как лучше оргинизовать такой частичный рендеринг, как связать его со скроллом, чтоб он максимально эмулировал полный список, а не пролистывал по страницам.

А точно проблемы с производительностью есть? Они случайно не из-за накостыленного скролла?

Можно попробовать выводить по мере скролла собственно.

Kalashnikov ★★★
()
Ответ на: комментарий от Kalashnikov

ну какбэ 10 000 элементов... тут и на 1000 работа не комфортная выводить по мере скролла это ок, тут уже есть подгрузка. но юзер может не указывать фитра и желать пролистать вконец. тоесть нужно выводить по позиции скролла +- прилегающие, остальные удалять. вообще задача ясна, хотелось что-то увидеть, но берут сомнения что оно существует

trashymichael ★★★
() автор топика
Ответ на: комментарий от Yustas

ну это очевидное решение. но модель поведения там не предусматривает страниц. я же говорю, там подгружается по мере надобности, но может возникнуть ситуация когда понадобятся все. так что нужно делать изврат с отсечением невидимых элементов. попробуем, посмотрим.

trashymichael ★★★
() автор топика
Ответ на: комментарий от trashymichael

А зачем отсекать? Разве уже добавленные элементы будут сильно тормозить дом?

Ты хоть что-нибудь уже попробовал сделать и оценить производительность?

Kalashnikov ★★★
()

Если у элементов фиксированная высота, то можно иметь просто контейнеры в списке, при прокрутке записывать в них DOM элементы. DOM можно кэшировать.

note173 ★★★★★
()

есть очень старая демка. ничего не тормозит и не лагает. «динамическое» создание узлов (для подуровней, с «верхним» уровнем уже можна работать)

ZuBB ★★★★★
()
Ответ на: комментарий от Kalashnikov

да, у меня уже все работает. возможно проблема в том что это не единственный контейнер на странице. там куча в куче, как обычно. моя задача только реализовать это, переделывать остальное времени нет.

рядом с большим списком есть списки поменьше, в них перетаскиваются записи из большого. в момент перетаскивания запись скрывается в большом. я сделал все на событиях, так что физически только меняется display записи, но даже это приводит к лагу интерфейса.

trashymichael ★★★
() автор топика
Ответ на: комментарий от trashymichael

окей, беглый тест в две строки показывает что 10000 для списка совсем не предел. возможно дело в том что у меня каждый айтем jquery-ui-draggable, но скорее в днк проекта в котором этот список находится :\, там действительно все плохо но я не думал что настолько. вопрос пока снят, буду осматриваться более детально

trashymichael ★★★
() автор топика
Ответ на: комментарий от trashymichael

вобщем я какой-то лох печальный. даже список из 50 000 элементов хоть и рендерится не мгновенно, но работает наура. осталось сделать его элементы draggable и оценить масштабы бедствия.

trashymichael ★★★
() автор топика
Ответ на: комментарий от trashymichael

и с draggable все нормально. расходимся, пацаны. хорошо что я сначала тут написал а не начал быдлокодить. проблема в днк.

trashymichael ★★★
() автор топика
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.