Home▸Computer Science▸List Virtualization & View-Holder Recycling (2D)

List Virtualization & View-Holder Recycling (2D)

Interactive 2D simulator of the windowing algorithm behind every mobile scrolling list: scroll a 10,000-row feed, watch a device-viewport mockup and a live recycler-pool grid show only the on-screen rows getting a real view-holder from a small recycled pool, and compare node count and memory against a naive un-virtualized list.

Computer Science2DModerate60 FPS📱 Mobile-adapted⇄ 3D version
2d-mobile-ui-ux-design-patterns ↗ Open standalone

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 2D model of a 10,000-row list and its recycler pool exactly as a mobile framework implements it: a device-viewport mockup on the left and the raw recycler-pool array on the right. Drag the phone mockup (or the scroll slider) 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

Interactive 2D simulator of the windowing algorithm behind every mobile scrolling list: scroll a 10,000-row feed, watch a device-viewport mockup and a live recycler-pool grid show only the on-screen rows getting a real view-holder from a small recycled pool, and compare node count and memory against a naive un-virtualized list.

mobileui-uxlist-patternsperformancerecyclerviewdata-structures

2D · HTML5 Canvas 2D · 60 FPS target · runs fully client-side, no install

What did you find?

Add reproduction steps (optional)