Лучший и динамический способ отрисовки длинных списков элементов в DOM

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

Пример-

 if data is an array [] with length 100
<div class="example-viewport">
        <div *ngFor="let item of data" class="list">
          <h2>{{item.name}}</h2>
        </div>
      </div>
As data [] has length 100, it will create 100 nodes in DOM.

Проблема -

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

Решение

Angular (7+) дает нам доступ к новому поведению виртуальной прокрутки в Material Component Development Kit (CDK). Он предоставляет инструменты для циклического перебора данных, который отображает элементы только тогда, когда они видны в области просмотра, и обеспечивает лучший и динамичный способ эффективного отображения длинных списков элементов в DOM.

Component Development Kit (CDK) -
- это набор инструментов, реализующих общее поведение. Это своего рода абстракция библиотеки материалов Angular, без стилизации, специфичной для материального дизайна.

Давайте реализуем бесконечную виртуальную прокрутку

Предварительные требования - Angular (версия 7 или 7+), Node версии 11.0 или выше.

Шаг 1. Добавьте пакет @ angular / cdk

npm install @angular/cdk

Шаг 2: импортируйте ScrollingModule в свой модуль

import { ScrollingModule} from '@angular/cdk/scrolling';
imports: [
  ...,
ScrollingModule
]

Шаг 3. Внутри вашего компонента

Wrap your looping element inside 
<cdk-virtual-scroll-viewport>
</cdk-virtual-scroll-viewport>
use  *cdkVirtualFor instead of *Ngfor 
itemSize directive tells how tall(height of height) each item will be(in pixels). So, itemSize="100" means that item in the list will require 100px of height.
<cdk-virtual-scroll-viewport itemSize="100">
  <li *cdkVirtualFor="let item of data">
      <!-- Print item here -->
  </li>
</cdk-virtual-scroll-viewport>

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

Дополнительная информация с дополнительными функциями cdk-virtual-scroll

Пользовательские события - прослушивание события при прокрутке определенного элемента

<cdk-virtual-scroll-viewport itemSize="100" (scrolledIndexChange)="scrollhandler($event)">
  </cdk-virtual-scroll-viewport>

Доступ к CdkVirtualScrollViewport и его методу

import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
@ViewChild(CdkVirtualScrollViewport)
  viewport: CdkVirtualScrollViewport;
Access methods like
 this.viewport.scrollToIndex(23)

* cdkVirtualFor предоставляет несколько логических переменных в вашем шаблоне

<cdk-virtual-scroll-viewport itemSize="100">
  <li *cdkVirtualFor="let item of data; let index = index;
                       let count = count;
                       let first = first;
                       let last = last;
                       let even = even;
                       let odd = odd;">
      <!-- Print item here -->
  </li>
</cdk-virtual-scroll-viewport>

Удачного обучения… 👏👏👏