Как отрисовать большие данные в древовидной структуре с динамической подгрузкой при скролле?
Парни, дайте совет.
Есть данные в древовидной структуре (около 100-150 тыс объектов в массиве, выгружаю полностью и храню в indexeddb)
Рисуются через виртуал скролл с возможностью скрытия/открытия ветвей и чекбоксами.
Реализовал с помощью построения карты дерева, где в каждом узле есть ссылки на всех потомков
(чтобы каждый раз не обходить рекурсивно)
На 10-15 тыс полёт нормальный но думаю что от 50+ тыс будет тормозить.
Хочу встроить динамическую подгрузку данных в виртуал скролл но с деревом это сделать не просто.
Если кто то реализовывал нечто подобное, прошу намекнуть в какую сторону думать т.к. сейчас в голове несколько вариантов и я не знаю по какому идти.
Сейчас думаю забирать например по 1000 объектов и вычислять дельту при достижении которой будет подгрузка с бека,
Но что делать при скрытии узла? Думаю держать в каждой ноде некий children_count и увеличивать offset на него.
С другой стороны, 150 тыс объектов не так уж и много и можно впринципе
с ними работать отключив реактивность и заоптимизировать алгоритмы, навесить web-worker'ов и т.п.
Если у меня бы не было кучи времени на вылизывание собственного идеального решения, то я бы взял любую взрослую virtual-scroll либу, а дерево превратил бы в плоскую структуру (визуально оставив деревом само собой), с которой такие либы легко работают и в динамике и в статике. Немного трюкачества с подгрузкой, но в целом это гораздо проще чем городить что-то особое.
Руководитель frontend направления, предприниматель
Если не нужно держать сразу в реактивности, ну или просто в видимой обработке сразу все, то помочь может intersectionObserver или аналогичная костыльная приблуда (раньше приходилось иначе описывать поведение).
Это даст возможность не держать в памяти и не обрабатывать сразу все данные и узлы, но надо будет подсуетиться, чтобы правильно происходила обработка того, что сейчас во вьюпорте с зазором и удаления из DOM и памяти того, что не входит.
Я сейчас как раз с чем-то подобным работаю, вот только держать в реактивности мне приходится сразу все объекты. Благо их всего децл, пару тысяч.
Показывай потомков первого уровня. Если их дофига, то подгружай постепенно. При раскрытии одного из потомков, подгружай его потомков (первого уровня, без содержимого) и отображай по той-же схеме. При закрытии - удаляй все. Таким образом в браузере будет только необходимый минимум для визуализации.
Что касается реактивности, то она тебе навставляет палок в колеса. Как только заборишь первую задачу, начнешь забарывать дикую просадку в производительности из-за ненужных перерисовок.
