Как лучше отобразить таблицу 360х360 (129 600 элементов)?

Question

[Даниил Попов]

Необходимо отобразить на странице большую таблицу. Содержимое ячеек - цифры. Цвет ячейки зависит от значения. Одновременно во вьюпорт поместится поле приблизительно 20х30. Реализация предполагается на Vue. Основной запрос - скорость работы. Необходимо чтобы пользователь мог скроллить таблицу без тормозов. В песочницах после 150х150 начинаются подтормаживания.

Поделитесь, пожалуйста, опытом. Как это лучше реализовать? Таблицей или блоками? На что обратить внимание? Сгенерировать "в лоб" все сразу? Следить за скроллом и показывать только ячейки вьюпорте? Отрисовать в SVG? Как-то еще?

Comments

[Kovalsky]

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

[sim3x]

Больше 5х5 никто не воспримет
Если просто от балды показать что-то - сгенерируйте картинку иее показывайте

Answer 1

[Антон Антон]

Нужно использовать подход из https://github.com/tangbc/vue-virtual-scroll-list , если ячейки одного размера, то несложно.

Comments

[Kovalsky]

Люто плюсую идею виртуальных таблиц

Answer 2

[Sashqa]

https://github.com/vue-comps/vue-clusterize

Answer 3

[Lord_Dantes]

В основном суть лежит за нагрузкой, я думаю есть пару вариантов. Добавить кнопку возможно при которой подгружаются записи там 100-200, ну или оптимальное кол-во или же прик скролле сделать так если возможно аяксом.

Comments

[Даниил Попов]

Наверное, я не совсем удачно описал проблему. Данные подгружаются сразу. Это не проблема. Проблема именно в производительности при скролле (вертикальном и горизонтальном) таблицы

[Rustam Bainazarov]

Даниил Попов, таблицу вы не сможете оптимизировать. Выше и ниже что-то интересное прислали.

P. S. Блоки несравнимо производительнее таблиц.