Современные интерфейсы нередко работают с большими массивами данных: списками пользователей, логами, таблицами товаров, сообщениями чатов, результатами поиска. Когда количество элементов достигает сотен или тысяч, возникает фундаментальная проблема производительности.
При традиционном подходе каждый элемент списка отображается как отдельный DOM-узел. Браузер должен:
Если список содержит 1000–10000 элементов, это приводит к нескольким негативным эффектам:
Основные проблемы:
Даже при использовании виртуального DOM (React) реальный DOM остаётся ограничивающим фактором.
Решением становится виртуализация списков.
Виртуализация — это техника отображения только той части списка, которая видна пользователю в текущий момент времени.
Вместо рендера всех элементов:
10000 элементоврендерится только:
видимая область + небольшой буферНапример:
экран показывает ~12 элементов
+ буфер 5 сверху
+ буфер 5 снизу
=> всего ~22 DOM элементаТаким образом:
10000 элементов данных
22 элемента в DOMДанные остаются полными, но интерфейс работает только с небольшим подмножеством.
Виртуализация базируется на трёх ключевых механизмах:
Контейнер прокрутки имеет известную высоту.
height: 400px
overflow-y: autoПо текущему значению scrollTop вычисляется:
начальный индекс
конечный индексФормула:
visibleStartIndex = scrollTop / itemHeight
visibleEndIndex = visibleStartIndex + visibleItemCountЧтобы сохранить корректную прокрутку, создаётся виртуальная высота списка.
totalHeight = itemCount * itemHeightНо реальные элементы позиционируются абсолютно внутри контейнера.
Библиотека Radix UI предоставляет низкоуровневые, доступные (accessible) компоненты интерфейса. Многие из них работают со списками:
Когда такие компоненты содержат сотни или тысячи элементов, без виртуализации возникают серьёзные проблемы:
Поэтому виртуализация становится важной архитектурной техникой при интеграции Radix UI.
В контексте виртуализации чаще всего используются:
Контролируемая область прокрутки.
@radix-ui/react-scroll-areaПредоставляет:
Компонент выбора значения из списка.
@radix-ui/react-selectПроблема:
1000+ option элементовКомандная палитра.
cmd + kОбычно содержит:
команды
действия
результаты поискаКоличество элементов может достигать тысяч.
Структура виртуализированного списка:
ScrollContainer
VirtualSpacer (общая высота)
AbsoluteItems (видимые элементы)Схематично:
|--------------------|
| Scroll container |
| |
| [ item 120 ] |
| [ item 121 ] |
| [ item 122 ] |
| [ item 123 ] |
| |
|--------------------|Фактически:
10000 элементов
рендерится только 20items.length = 10000
itemHeight = 40px
containerHeight = 400pxКоличество видимых элементов:
visibleCount = containerHeight / itemHeightimport { useState } fr om "react"
function VirtualList({ items }) {
const itemHeight = 40
const containerHeight = 400
const [scrollTop, setScrollTop] = useState(0)
const startIndex = Math.floor(scrollTop / itemHeight)
const visibleCount = Math.ceil(containerHeight / itemHeight)
const endIndex = startIndex + visibleCount + 5
const visibleItems = items.slice(startIndex, endIndex)
const totalHeight = items.length * itemHeight
return (
<div
style={{
height: containerHeight,
overflowY: "auto"
}}
onScr oll={(e) => setScrollTop(e.currentTarget.scrollTop)}
>
<div style={{ height: totalHeight, position: "relative" }}>
{visibleItems.map((item, i) => {
const index = startIndex + i
return (
<div
key={index}
style={{
position: "absolute",
top: index * itemHeight,
height: itemHeight,
left: 0,
right: 0
}}
>
{item}
</div>
)
})}
</div>
</div>
)
}В DOM присутствует лишь небольшое число элементов.
Если рендерить только строго видимые элементы, при быстром скролле возможны артефакты:
Поэтому используется overscan.
Это дополнительная область элементов:
overscan = 5Реальный диапазон:
startIndex - overscan
endIndex + overscanЭто обеспечивает:
Radix ScrollArea часто используется как контейнер прокрутки.
import * as ScrollArea from "@radix-ui/react-scroll-area"Виртуализация может располагаться внутри Viewport.
<ScrollArea.Root>
<ScrollArea.Viewport
onScr oll={handleScroll}
style={{ height: 400 }}
>
{virtualizedItems}
</ScrollArea.Viewport>
<ScrollArea.Scrollbar orientation="vertical" />
</ScrollArea.Root>Viewport работает как scroll-container.
В реальных проектах чаще применяется готовая библиотека виртуализации.
Одна из наиболее популярных:
@tanstack/react-virtualПреимущества:
npm install @tanstack/react-virtualimport { useVirtualizer } from "@tanstack/react-virtual"
import { useRef } from "react"
function VirtualList({ items }) {
const parentRef = useRef()
const rowVirtualizer = useVirtualizer({
count: items.length,
getScrollElement: () => parentRef.current,
estimateSize: () => 40,
overscan: 5
})
return (
<div
ref={parentRef}
style={{
height: 400,
overflow: "auto"
}}
>
<div
style={{
height: rowVirtualizer.getTotalSize(),
position: "relative"
}}
>
{rowVirtualizer.getVirtualItems().map((virtualRow) => (
<div
key={virtualRow.key}
style={{
position: "absolute",
top: 0,
transform: `translateY(${virtualRow.start}px)`,
height: virtualRow.size
}}
>
{items[virtualRow.index]}
</div>
))}
</div>
</div>
)
}Проблема:
<Select>
5000 <Select.Item>
</Select>Открытие меню вызывает:
Виртуализация решает проблему.
Select.Content
ScrollArea
VirtualizedList
Select.Item<Select.Content>
<ScrollArea.Root>
<ScrollArea.Viewport>
<VirtualList items={items} />
</ScrollArea.Viewport>
</ScrollArea.Root>
</Select.Content>Внутри виртуализированного списка размещаются
Select.Item.
Несколько особенностей требуют внимания.
Radix активно использует roving focus.
Это означает:
фокус перемещается между элементамиЕсли элемент не существует в DOM (виртуализация), возникает проблема.
Решение:
При навигации клавишами:
ArrowDown
ArrowUpнеобходимо прокручивать список автоматически.
Виртуализатор должен поддерживать:
scrollToIndex(index)Компоненты Radix часто поддерживают typeahead.
Например:
набор текста -> поиск элементаПосле поиска нужно:
scrollToIndex(foundIndex)Иногда элементы списка имеют разную высоту.
Например:
сообщения чата
карточки
комментарииВ этом случае фиксированная высота невозможна.
Решение:
Библиотеки виртуализации используют:
ResizeObserverили ручное измерение.
Эти термины часто используются как синонимы, но имеют различия.
Отображение окна элементов.
startIndex -> endIndexБолее общий термин.
Включает:
Виртуализировать можно не только вертикальные списки.
Примеры:
Формулы аналогичны:
scrollLeft
itemWidth
visibleCountБольшие таблицы могут иметь:
1000 строк
1000 колонокDOM:
1 000 000 ячеекВиртуализация применяется одновременно:
по вертикали
по горизонталиТак работают:
Сравнение:
| Количество элементов | DOM без виртуализации | DOM с виртуализацией |
|---|---|---|
| 1000 | 1000 | ~20 |
| 5000 | 5000 | ~25 |
| 10000 | 10000 | ~30 |
Разница:
Элементы списка часто оборачиваются в:
React.memoЭто предотвращает лишние рендеры.
Ключи должны быть стабильными:
key={item.id}а не:
key={index}Элементы списка должны быть лёгкими.
Нежелательно внутри:
Некоторые разработчики делают:
display: noneЭто не виртуализация.
DOM всё равно содержит элементы.
Слишком маленький overscan вызывает:
мерцаниеСлишком большой:
лишний DOMОптимальный диапазон:
5–10 элементовЕсли элементы не позиционируются абсолютно, браузер выполняет полный layout списка.
Не всегда есть смысл усложнять архитектуру.
Если список содержит:
до 100 элементоввиртуализация обычно не требуется.
Она оправдана при:
500+
1000+
10000+поиск по 10000 пользователейсотни команддесятки тысяч строкбольшие datasetsчат-интерфейсыТипичная структура:
Radix Component
ScrollArea
Virtualizer
Visible ItemsСистема обеспечивает:
Виртуализация становится ключевой техникой построения интерфейсов, работающих с большими объёмами данных, и гармонично интегрируется с архитектурой низкоуровневых компонентов Radix UI.