Замедляют ли невидимые части широкой таблицы её скроллинг?

Question

[Сергей Соколов]

В фиксированном окне div overflow-x:hidden показываются данные в виде таблицы – иерархия div'ов с абсолютным позиционированием.
Общий блок → блок колонки → блоки строк. Колонки одинаковой ширины, в окно помещается ровно 5.

Когда колонок больше 5 (бывает и 20 и 100), приходится горизонтально прокручивать. Сделал шаговую прокрутку: по кнопке/клавиши вправо-влево меняется свойство left общего блока, и стилями делается плавное смещение.

Вопрос: утяжеляют ли этот велосипед невидимые за окном колонки?

Сейчас собираюсь чуть переделывать эту конструкцию и надо решить:

1. рендерить ли, как и раньше, сразу все колонки и смещать общий блок;
   
2. или рендерить только видимые плюс по 1 справа и слева, а при очередном смещении дорендерить недостающий запас справа/слева и удалять уехавшие слишком далеко за кадр?
   

Answer 1

[Александр Аксентьев]

Вопрос: утяжеляют ли этот велосипед невидимые за окном колонки?

да поэтому придумали отложенный рендеринг и всякое такое.

Т.е. выводится и строится html только для того что в данный момент должно быть видно.
Скролл соответственно полностью виртуальный и рендерит с нуля данные при прокручивании.

https://datatables.net/examples/ajax/defer_render.html

Answer 2

[forspamonly2]

корректный виртуальный рендеринг таблиц - крайне нетривиальная штука. одни только правила объединения ячеек чего стоят.

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

а если у вас ячейки от него не зависят и гарантированно имеют фиксированный размер, то можно попробовать сделать table-layout: fixed и тормозов станет меньше. может вам и этого хватит, чтобы без виртуального рендеринга обойтись.