Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що таке віртуалізація списків?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Віртуалізація списків** - це техніка оптимізації, за якої в DOM **рендериться лише та частина списку, яка зараз видима користувачу**, а не весь список цілком. **Ключове:** це «лінива» відмальовка довгих списків - замість 10 000 елементів у DOM перебувають, наприклад, лише 30-50, а решта - це просто «заглушки» потрібної висоти.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення**Віртуалізація списків** - це техніка оптимізації, за якої в 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 заголовкиДля рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.