Как лучше отобразить таблицу 360х360 (129 600 элементов)?
Необходимо отобразить на странице большую таблицу. Содержимое ячеек - цифры. Цвет ячейки зависит от значения. Одновременно во вьюпорт поместится поле приблизительно 20х30. Реализация предполагается на Vue. Основной запрос - скорость работы. Необходимо чтобы пользователь мог скроллить таблицу без тормозов. В песочницах после 150х150 начинаются подтормаживания.
Поделитесь, пожалуйста, опытом. Как это лучше реализовать? Таблицей или блоками? На что обратить внимание? Сгенерировать "в лоб" все сразу? Следить за скроллом и показывать только ячейки вьюпорте? Отрисовать в SVG? Как-то еще?
В основном суть лежит за нагрузкой, я думаю есть пару вариантов. Добавить кнопку возможно при которой подгружаются записи там 100-200, ну или оптимальное кол-во или же прик скролле сделать так если возможно аяксом.
Наверное, я не совсем удачно описал проблему. Данные подгружаются сразу. Это не проблема. Проблема именно в производительности при скролле (вертикальном и горизонтальном) таблицы
Простой
