What is list virtualization?

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:

---

#Virtualization libraries in Vue

In practice, people use:

#vue-virtual-scroller

The most popular library.

#vue-virtual-scroll-list

Lightweight, good for tables:

---

#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 for