Skip to main content

Що таке віртуалізація списків?

VueJunior~1 хв читання
Запропонувати правку

Віртуалізація списків - це техніка оптимізації, за якої в DOM рендериться лише та частина списку, яка зараз видима користувачу, а не весь список цілком.

Простіше кажучи:

Віртуалізація - це «лінива» відмальовка довгих списків: замість 10 000 елементів у DOM перебувають, наприклад, лише 30-50.

Решта - просто «заглушки» потрібної висоти. Коли користувач скролить, елементи динамічно замінюються на нові.

Навіщо потрібна віртуалізація?

Якщо в DOM відмалювати:

  • 1 000 елементів -> вже важко
  • 5 000 елементів -> інтерфейс гальмує
  • 10 000+ елементів -> браузер майже вмирає

Причина: багато елементів = багато роботи для Layout, Paint, Diffing Virtual DOM.

Віртуалізація вирішує цю проблему.

Як працює віртуалізація?

  1. Обчислюється висота одного рядка (або елемента).
  2. Розраховується, скільки елементів вміщується у видиму область.
  3. У DOM вставляється потрібна кількість елементів + невеликий буфер (наприклад, 10 зверху/10 знизу).
  4. Сам список «розтягується» до повної висоти.
  5. Під час скролу:
  • елементи, які виходять за межі екрана, видаляються
  • нові елементи додаються
  • позиція контейнера коригується

У DOM завжди відмальована лише видима частина, незалежно від розміру списку.

Приклад (ідея):

Якщо список містить 10 000 рядків, але на екрані вміщується 20:

DOM містить лише 20-40 елементів Відповідність між scrollTop і показаними індексами змінюється динамічно

Бібліотеки віртуалізації у Vue

На практиці використовують:

vue-virtual-scroller

Найпопулярніша бібліотека.

vue
<RecycleScroller :items="items" :item-size="48" key-field="id" />

vue-virtual-scroll-list

Легка, підходить для таблиць:

vue
<VirtualList :data-key="'id'" :data-sources="rows" :data-component="RowComponent" />

Переваги віртуалізації

Колосальна економія DOM-вузлів

Навантаження на браузер знижується в рази.

Плавний скрол

Не гальмує, навіть за великих обсягів даних.

Швидкий рендер

Навіть величезні дані відображаються миттєво.

Менше роботи для Virtual DOM

Перемальовується лише видима частина.

Недоліки віртуалізації (часто запитують!)

  • складніше зробити авто-підгонку висоти елементів
  • потрібно фіксувати height або обчислювати його
  • пошук/фільтрація великих масивів усе одно важка
  • при миттєвій прокрутці може бути «стрибок»
  • потрібно враховувати sticky заголовки

Коротка відповідь

Для співбесіди
Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Запропонувати правку