Как оптимизировать загрузку большого массива данных на страницу в Vue?

Question

[Алексей]

Добрый день!
Подскажите, как можно ли оптимизировать работу с большой таблицей (более 600 строк), загружаемой с сервера, при этом, к каждой исходной строке добавляются еще расчетные данные (около десятка столбцов) плюс, все это должно быть реактивным (должна быть возможность изменять некоторые исходные значения в таблице, и пересчитывать расчетные) и сортируемым по всем столбцам?
Пагинация не вариант по условию.

Comments

[Вадим]

Абстрактный вопрос - общий ответ.
Вынести первичные вычисления как можно больше на сервер, в идеале - все.
Оптимизировать алгоритм дополнительных расчётов и генерации таблицы.
Использовать virtual-scroll, линивую погрузку и тд.

Хотя Вы не сказали на что оптимизировать. Если с точки зрения сетевого трафика, то выносить все таблицу на сервер уже выглядит менее рациональным(чем получать только данные) . В таком случае ленивая динамическая подгрузка.

[Алексей]

Вадим, проблема, в основном, в юзабилити. Хотя все вычисления делаются в микротасках, даже за мощным компом наблюдаются. фризы. Что будет на офисных... Я тоже уже склоняюсь к тому, чтобы перенести все вычисления на бэк, а на фронте только сортировать и пересчитывать единичные при необходимости.
Спасибо за совет!

[Вадим]

Алексей,

Хотя все вычисления делаются в микротасках

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

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

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

[Александр Маджугин]

Так вам нужно оптимизировать работу с большой таблицей или на около 600 строк?
В том смысле что если у вас тормозит таблица в 600 строк или чуть больше - тут явно что-то не так. Может быть конечно вычислений много и они сложные... но вангую что что-то вы вероятно пересчитываете слишком часто или не очень лениво.
Если все же все оптимально и тормозит - делайте виртуальную промотку.
Ну а оптимизировать тут нечего - вы не показали код который можно бы было оптимизировать.