Виртуализация адаптивной Grid разметки

Значимый прорыв формирует отрасль ИИ: itihon 27 минут назад Виртуализация адаптивной Grid разметки Средний 8 мин 1. 3K Веб-разработка * ReactJS * VueJS * Angular * CSS * В этой статье я хочу поделиться своим подходом к решению задачи виртуализации списка элементов неизвестной высоты. Популярные библиотеки решают эту задачу с помощью приблизительных оценочных размеров с последующими замерами и корректировкой.

Я хочу описать метод, основанный на привязке индексов к положению скроллбара, который позволяет достаточно точно позиционировать видимый диапазон элементов, при этом, не зная даже приблизительных размеров всех предыдущих элементов, используя только простую математику и родные механизмы позиционирования и разметки браузера. С примерами работы на TypeScript, React, Vue и Angular можно ознакомиться на домашней странице проекта Layout Virtual. Репозиторий с проектом тут.

Технические детали

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

Чтобы узнать количество элементов, необходимое для заполнения вьюпорта, нужно высоту вьюпорта разделить на высоту элемента. Немного сложнее дело обстоит со списком элементов разной известной высоты. Здесь уже необходимо, как минимум на этапе инициализации (а как максимум при каждом изменении состава элементов), пройтись по всем элементам списка и составить массив смещений каждого элемента (префиксные суммы высот всех предыдущих элементов, O(N)) для того чтобы в дальнейшем при прокрутке быстро находить видимый диапазон по смещению за время O(logN) , используя бинарный поиск.

Можно оптимизировать проход по всем элементам, “размазав” вычисления по фреймам, чтобы не заморозить интерфейс, а также применить “ленивые” вычисления - пересчитывать смещения элементов, до которых пользователь реально доскролил. Ещё более интересно дело обстоит со списком элементов неизвестной высоты, динамический список, где высота элементов зависит от их содержимого, а также может меняться в результате изменения ширины элементов и построчного переноса текста. Если в предыдущем случае мы рассчитывали смещение, основываясь на известных высотах элементов, то как быть здесь, когда высоты элементов неизвестны?

Отраслевые последствия

Задать примерную высоту и далее, по мере прокрутки, обмерять отрисованные элементы (с помощью ResizeObserver например) и корректировать смещение измеренными значениями. Суть методаВместо того чтобы привязывать смещение видимого диапазона элементов к абсолютным значениям их высот, которые неизвестны, можно привязать индексы элементов к процентному соотношению прокрутки. Представьте себе список из 110 элементов с высотой вьюпорта 100px, индексами от 0 до 109, где каждый элемент имеет высоту 10px.

Тогда при положении слайдера скроллбара равному 0% будет соответствовать индекс 0, находящийся у верхнего края вьюпорта.

Событие, по словам экспертов, усилит конкуренцию в сфере ИИ.