Comparison
content-visibilityvsList virtualisation
content-visibility
you told the browser to skip rendering the sections that are off screen and the initial layout got much faster.
A property that lets the browser skip style, layout and paint for a subtree until it is near the viewport. On a long document it can cut initial rendering time dramatically, because most of the page never gets laid out. It needs `contain-intrinsic-size` to give a placeholder height, or the scrollbar jumps as sections are rendered, and it hides content from find-in-page in older implementations.
Full entry →List virtualisation
the list has fifty thousand rows and only the thirty on screen exist in the DOM at any moment.
Rendering only the visible slice of a long list and adjusting the scroll container's height so the scrollbar still behaves. It is the only way to keep a large table interactive, because DOM node count drives layout, paint and memory. The costs are real: find-in-page, anchor links, keyboard navigation and screen readers all see only what is rendered, and variable row heights make the arithmetic considerably harder.
Full entry →