Home▸Computer Science▸List Virtualization & View-Holder Recycling

List Virtualization & View-Holder Recycling

Interactive 3D simulator of the windowing algorithm behind every mobile scrolling list: scroll a 10,000-row feed, watch only the on-screen rows get a real view-holder from a small recycled pool, and compare live DOM/memory cost against a naive un-virtualized list.

Computer Science3DModerate60 FPS📱 Mobile-adapted

Every fast-scrolling mobile feed — a photo grid, a chat history, a card list — relies on the same trick: it never builds one view per data row. This simulator renders a 3D model of a 10,000-row list and its recycler pool exactly as a mobile framework implements it. Drag the scroll slider (or use the fling button) and watch the sim compute the first visible row from the scroll offset, walk a small window of view-holders sized to the viewport plus your buffer setting, and rebind — not recreate — any holder whose row scrolled out of range. Live counters track how many holders are alive, how many rebind ("recycle") events have fired, and how the node count and memory footprint compare against flipping virtualization off, where the sim allocates one block per row instead and both numbers spike.

⚙ Under the hood

Scroll a 10,000-row mobile list and watch the real windowing algorithm at work: a small pool of view-holders is rebound to whichever rows enter the viewport instead of allocating a new view per row, with live counters comparing node count and memory against a naive un-virtualized list.

mobileui-uxlist-patternsperformancerecyclerviewdata-structures

3D · Three.js / WebGL renderer · 60 FPS target · runs fully client-side, no install