Lesson 3.1

List virtualization

Virtualisation renders only the visible window of a list plus a small overscan buffer, and translates the container so the scrollbar still behaves.

13mAdvanced6.3k students

Overview

Ten thousand rows, twenty DOM nodes

Virtualisation renders only the visible window of a list plus a small overscan buffer, and translates the container so the scrollbar still behaves. The cost of the list stops scaling with its length.

Fixed row heights make this easy because every offset is arithmetic. Variable heights need measurement and caching, which is where most naive implementations start jittering during fast scrolls.

Accessibility is the part that gets dropped. Rows that do not exist cannot be found by in-page search or reached by a screen reader, so pair virtualisation with real search and skip links.

In this lesson you will:

  • Render only the rows currently on screen
  • Handle variable row heights
  • Keep scroll position and keyboard access intact

Resources

Previous Lesson
Next Lesson
List virtualization — React Performance Engineering — Vertex