Suggest an editImprove this articleRefine the answer for “What is list virtualization?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)**List virtualization** is an optimization technique where the DOM **renders only the part of the list that's currently visible to the user**, not the entire list. **Key point:** it's "lazy" rendering of long lists - instead of 10,000 elements in the DOM, there might be only 30-50, with the rest replaced by simple "placeholders" of the right height.Shown above the full answer for quick recall.Answer (EN)Image**List virtualization** is an optimization technique where the DOM **renders only the part of the list that's currently visible to the user**, not the entire list. In other words: > **Virtualization is "lazy" rendering of long lists: instead of 10,000 elements in the DOM, there might be only 30-50.** The rest are just "placeholders" of the right height. When the user scrolls, elements are dynamically swapped for new ones. --- ## Why is virtualization needed? If you render: - 1,000 elements to the DOM, it's already heavy - 5,000 elements, the interface starts to lag - 10,000+ elements, the browser almost dies The reason: many elements mean a lot of work for layout, paint, and Virtual DOM diffing. Virtualization solves this problem. --- ## How does virtualization work? 1. The height of one row (or element) is calculated. 2. It's calculated how many elements fit in the visible area. 3. The DOM gets the needed number of elements plus a small buffer (for example, 10 above/10 below). 4. The list itself "stretches" to its full height. 5. On scroll: - elements that move outside the screen are removed - new elements are added - the container's position is adjusted The DOM always renders **only the visible part**, regardless of the list's size. --- ## An example (the idea): If a list has 10,000 rows but only 20 fit on screen: ``` The DOM contains only 20-40 elements The mapping between scrollTop and the shown indexes changes dynamically ``` --- ## Virtualization libraries in Vue In practice, people use: #### **vue-virtual-scroller** The most popular library. ```vue <RecycleScroller :items="items" :item-size="48" key-field="id" /> ``` #### vue-virtual-scroll-list Lightweight, good for tables: ```vue <VirtualList :data-key="'id'" :data-sources="rows" :data-component="RowComponent" /> ``` --- ## Advantages of virtualization #### Massive savings on DOM nodes The load on the browser drops dramatically. #### Smooth scrolling Doesn't lag, even with large amounts of data. #### Fast rendering Even huge datasets render instantly. #### Less work for the Virtual DOM Only the visible part gets re-rendered. --- ## Drawbacks of virtualization (often asked about!) - auto-fitting element heights is harder - you need to fix the height or compute it - searching/filtering large arrays is still heavy - an instant scroll can cause a "jump" - sticky headers need to be accounted forFor the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.