Виртуализируйте большие списки с помощью Angular CDK

Для повышения скорости отклика больших списков используйте виртуальную прокрутку.

Stephen Fluin

Прокручиваемый список — один из самых распространенных шаблонов пользовательского интерфейса сегодня, будь то просмотр бесконечно прокручиваемой ленты в вашей любимой социальной сети или навигация по корпоративной панели управления. Когда прокручиваемые списки становятся очень длинными (сотни, тысячи или сотни тысяч элементов), производительность приложения может снизиться.

Большие списки могут загружаться медленно, поскольку приложению необходимо загрузить и отобразить все данные заранее. Они также могут медленно отображаться и перемещаться по ним, поскольку каждый элемент списка может содержать обширные данные, мультимедийные материалы и функциональные возможности.

Пользователи могут столкнуться с проблемами при загрузке или прокрутке страницы, что приводит к разочарованию и отказу от просмотра страницы.

Виртуальная прокрутка в Angular с помощью Component Dev Kit

Виртуальная прокрутка — это основной метод, используемый для решения проблем масштабирования. Виртуальная прокрутка создает впечатление очень большого списка, предоставляя полосу прокрутки соответствующего размера и возможность перемещаться по списку без необходимости хранения всего списка в памяти или его отображения на странице.

В Angular виртуальная прокрутка обеспечивается Component Dev Kit (CDK) . Изменив способ итерации по спискам и указав несколько дополнительных параметров конфигурации, виртуальная прокрутка CDK автоматически управляет виртуальным отображением ваших списков, повышая производительность и отзывчивость страницы.

Вместо того чтобы отображать весь список сразу, будет отображаться только подмножество элементов, помещающихся на экране (плюс небольшой буфер). По мере перемещения пользователя по списку будет вычисляться и отображаться новое подмножество элементов, при необходимости повторно используя существующий DOM.

В оставшейся части этой статьи мы рассмотрим, как настроить базовую виртуальную прокрутку. Полный рабочий пример вы можете увидеть в этом демонстрационном приложении:

Настройка виртуальной прокрутки

Сначала убедитесь, что вы установили @angular/cdk с помощью вашего любимого менеджера пакетов. Чтобы установить его с помощью npm, выполните эту команду в терминале:

npm install --save @angular/cdk

Добавьте ScrollingModule в ваше приложение.

После установки CDK импортируйте ScrollingModule , отвечающий за виртуальную прокрутку, из пакета @angular/cdk/scrolling . Затем добавьте его в массив imports вашего модуля:

import {ScrollingModule} from '@angular/cdk/scrolling';

...
imports: [
  ScrollingModule
...
]
...

Создайте область просмотра.

Чтобы увидеть, как работает пакет, попробуйте создать компонент со списком чисел от 0 до 99 999:

@Component({
  template: `<div *ngFor="let item of list">{{item}}</div>`
})
export class ScrollComponent {
  list = Array.from({length: 100000}).map((_, i) => i);
}

При отрисовке приложения браузеру приходится отображать 100 000 отдельных элементов <div> . Это может быть приемлемо для простых текстовых узлов, но любая сложность повторяющегося шаблона плохо масштабируется, и количество обработчиков событий значительно увеличится.

Чтобы добавить виртуальную прокрутку и избежать этих проблем, необходимо создать область просмотра, обернув список в элемент <cdk-virtual-scroll-viewport> :

@Component({
  template: `<cdk-virtual-scroll-viewport>
    <div *ngFor="let item of list">{{item}}</div>
    </cdk-virtual-scroll-viewport>`
})
export class ScrollComponent {
  list = Array.from({length: 100000}).map((_, i) => i);
}

Поскольку ScrollingModule динамически отображает подмножества списка, вам необходимо указать высоту области просмотра с помощью стандартных CSS-стилей. Также необходимо указать размер itemSize , чтобы дать области просмотра представление о её содержимом. Модуль использует эту информацию для определения количества элементов, которые следует хранить в DOM в данный момент времени, и способа отображения полосы прокрутки соответствующего размера.

@Component({
  template: `<cdk-virtual-scroll-viewport itemSize="18" style="height:80vh">
    <div *ngFor="let item of list">{{item}}</div>
    </cdk-virtual-scroll-viewport>`
})
export class ScrollComponent {
  list = Array.from({length: 100000}).map((_, i) => i);
}

Наконец, преобразуйте *ngFor в *cdkVirtualFor :

@Component({
  template: `<cdk-virtual-scroll-viewport itemSize="18" style="height:80vh">
    <div *cdkVirtualFor="let item of list">{{item}}</div>
    </cdk-virtual-scroll-viewport>`
})
export class ScrollComponent {
  list = Array.from({length: 100000}).map((_, i) => i);
}

Вместо того чтобы перебирать весь список целиком, область просмотра динамически определяет и перебирает правильное подмножество списка для пользователя. Теперь, когда пользователь загружает страницу, CDK должен отобразить подмножество списка, которое помещается на экране (плюс небольшой буфер), а любые события прокрутки в области просмотра загружают и отображают соответствующее подмножество списка:

Идем дальше

Возможности виртуальной прокрутки CDK выходят далеко за рамки этого простого примера. В примере приложения весь список находился в памяти, но для более сложных приложений его можно было получить по запросу. Подробнее о других возможностях ScrollingModule и директивы cdkVirtualOf можно узнать, прочитав раздел о Scrolling в документации CDK .