Как избежать потери производительности при переполнении: скрыто?

У меня есть HTML-таблица, в которой может быть больше тысячи строк и около дюжины столбцов.

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

При анализе производительности в Chrome на большой таблице основным убийцей производительности является overflow:hidden.

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

Что люди рекомендуют для повышения производительности?

При необходимости мне не нужно использовать тег таблицы, но я бы предпочел придерживаться тега таблицы, если можно добиться хорошей производительности.

Обновление 1: я включил файл, демонстрирующий проблему с производительностью здесь. Предупреждение: файл довольно большой (25 МБ) и замедлит работу вашего компьютера. По умолчанию для таблицы не установлено скрытое переполнение, и после загрузки таблицы (это может занять некоторое время) производительность браузера относительно плавная.

Однако, если вы отредактируете файл и раскомментируете строки 12-15, а затем откроете его. Вы увидите, что после загрузки браузер вокруг стола стал значительно менее отзывчивым.

9
задан Brian Tompsett - 汤莱恩 12 August 2017 в 12:53
поделиться