Техническое обоснование
Различия в поведении скролла между компонентами tableP и koob-table.
1. Описание наблюдаемого эффекта:
При прокрутке содержимого таблицы koob-table может наблюдаться визуальный эффект незначительной рассинхронизации элементов. Данный эффект отсутствует в сводной таблице tableP. Однако, при большом количестве ячеек эффект становится более заметным.
2. Архитектурные различия компонентов:
| Характеристика | tableP (сводная) | koob-table (обычная) |
|---|---|---|
| Ячейки основной области | ResizeObserver | ResizeObserver |
| Ячейки осей (левая/верхняя) | Без отслеживания размеров | ResizeObserver |
| Перерасчёт осей при скролле | Отсутствует | Динамический |
| Автоподстройка осей под контент | Нет | Да |
3. Техническое объяснение:
Сводная таблица (tableP): ячейки в основной области таблицы используют ResizeObserver, однако ячейки левой и верхней осей не отслеживают свои размеры динамически. Оси рендерятся статично, что обеспечивает синхронный скролл без задержек.
Обычная таблица (koob-table): каждая ячейка, включая ячейки осей, является отдельным компонентом с собственным ResizeObserver. При скролле это приводит к следующему:
- Браузер рендерит новые ячейки осей, попадающие в область видимости;
- ResizeObserver каждой ячейки оси срабатывает и измеряет её размеры;
- Компонент обновляет своё внутреннее состояние;
- Происходит повторная перерисовка (re-render).
Именно эти операции для ячеек осей могут создавать визуальную задержку относительно основной области таблицы. Чем больше ячеек одновременно появляется в области видимости, тем больше параллельных вычислений выполняется и тем заметнее эффект.
4. Назначение данной архитектуры:
Использование ResizeObserver для ячеек осей в koob-table сделано намеренно: это позволяет таблице автоматически подстраиваться под размер содержимого. Если текст в ячейке оси изменится или станет длиннее, ячейка автоматически расширится, и вся таблица корректно перестроится без ручного вмешательства.
5. Заключение:
Наблюдаемый эффект является следствием того, что в koob-table ячейки осей динамически отслеживают свои размеры через ResizeObserver, тогда как в tableP оси этого не делают. Это архитектурное решение обеспечивает koob-table автоматическую адаптацию под любой контент, но создаёт небольшой компромисс в плавности скролла при работе с большими объёмами данных.