Алгоритмы (анимации)Работает в браузереПроверено: 1 октября 2026 г.

List Virtualization (Windowing): визуализация

List Virtualization (Windowing): визуализация. Анимированные алгоритмы для фронтенда: сортировка, поиск, debounce и throttle, event loop, виртуальный DOM, кеш, trie и поиск пути. Быстро, приватно и удобно прямо в браузере.

Локальноприватно по умолчаниюБыстробез регистрации

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

Browser and DOMTime: O(visible rows)Space: O(visible rows)

Rows that fit on screenExtra rows rendered above and below

30 items

Scroll position

scrollTop = 0px

Items in the DOM

6 of 30

Rendered range

1 to 6

Step 1 / 15

A long list can have thousands of rows. Virtualization renders only the rows in view (green) plus a few extra (blue); the rest (grey) are not in the DOM at all.

checking
found / in view
ruled out

JavaScript

1function getVisibleRange(scrollTop, viewportHeight, itemHeight, total, overscan = 2) {
2  const first = Math.floor(scrollTop / itemHeight);
3  const last = Math.ceil((scrollTop + viewportHeight) / itemHeight);
4  const start = Math.max(0, first - overscan);
5  const end = Math.min(total, last + overscan);
6  return [start, end];
7}

Tip: use the arrow keys to step and the space bar to play or pause.

Loading animation...