Algoritmos (animações)Funciona no seu navegadorRevisado em 1 de outubro de 2026

List Virtualization (Windowing): animação

List Virtualization (Windowing): animação. Algoritmos animados para front-end: ordenação, busca, debounce e throttle, event loop, DOM virtual, caches, trie e busca de caminhos. Rápido, privado e fácil de usar no navegador.

Localprivado por padrãoRápidosem cadastro

Os controles da ferramenta abaixo ainda estão em inglês.

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...