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

Question

[kulakov_da]

Парни, дайте совет.
Есть данные в древовидной структуре (около 100-150 тыс объектов в массиве, выгружаю полностью и храню в indexeddb)
Рисуются через виртуал скролл с возможностью скрытия/открытия ветвей и чекбоксами.
Реализовал с помощью построения карты дерева, где в каждом узле есть ссылки на всех потомков
(чтобы каждый раз не обходить рекурсивно)
На 10-15 тыс полёт нормальный но думаю что от 50+ тыс будет тормозить.
Хочу встроить динамическую подгрузку данных в виртуал скролл но с деревом это сделать не просто.
Если кто то реализовывал нечто подобное, прошу намекнуть в какую сторону думать т.к. сейчас в голове несколько вариантов и я не знаю по какому идти.
Сейчас думаю забирать например по 1000 объектов и вычислять дельту при достижении которой будет подгрузка с бека,
Но что делать при скрытии узла? Думаю держать в каждой ноде некий children_count и увеличивать offset на него.

С другой стороны, 150 тыс объектов не так уж и много и можно впринципе
с ними работать отключив реактивность и заоптимизировать алгоритмы, навесить web-worker'ов и т.п.

Comments

[Kirill Makarov]

На реакте создавал дерево с помощью react-d3-tree можно есть аналог на js

[Aetae]

Если у меня бы не было кучи времени на вылизывание собственного идеального решения, то я бы взял любую взрослую virtual-scroll либу, а дерево превратил бы в плоскую структуру (визуально оставив деревом само собой), с которой такие либы легко работают и в динамике и в статике. Немного трюкачества с подгрузкой, но в целом это гораздо проще чем городить что-то особое.

Answer 1

[Арсений Матыцин]

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

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

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

Answer 2

[profesor08]

Показывай потомков первого уровня. Если их дофига, то подгружай постепенно. При раскрытии одного из потомков, подгружай его потомков (первого уровня, без содержимого) и отображай по той-же схеме. При закрытии - удаляй все. Таким образом в браузере будет только необходимый минимум для визуализации.

Что касается реактивности, то она тебе навставляет палок в колеса. Как только заборишь первую задачу, начнешь забарывать дикую просадку в производительности из-за ненужных перерисовок.