Algorithmes (animations)Fonctionne dans votre navigateurVérifié le 1 octobre 2026

List Virtualization (Windowing) : animation

List Virtualization (Windowing) : animation. Algorithmes animés pour le front-end : tri, recherche, debounce et throttle, boucle d’événements, DOM virtuel, caches, trie et recherche de chemin. Rapide, privé et facile à utiliser dans votre navigateur.

Localprivé par défautRapidesans inscription

Les commandes de l’outil ci-dessous sont pour l’instant en anglais.

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