Performance and optimization · Only what fits

Virtualization-style app

Illustrative system design for a only what fits app like Virtualization: 3 topics to read, from requirements to deep dives.

Illustrative design, not Virtualization’s actual implementation. Arrowbox is not affiliated with Virtualization’s owner. Disclaimer

Core

Windowing a long listBeginner · 36 min read · Sign in to read
Keep a few dozen DOM nodes no matter how long the list is: compute which rows intersect the viewport, render them plus an overscan, and let a spacer give the scrollbar its full height.
Unknown and changing heightsAdvanced · 33 min read · Sign in to read
When rows differ in height, start from an estimate, measure rows as they render, keep a running offset table, and correct the scroll position so measured differences never move what the reader sees.
Anchoring, jumping and accessibilityAdvanced · 41 min read · Sign in to read
Keep the row the reader is looking at still when content arrives above, jump to any index without rendering the rows in between, and tell assistive technology how big the list really is.