Frontender Libs - обзор библио… on Telegram: “Рендеринг длинных списков без потерь производите…”

Рендеринг длинных списков без потерь производительности в Angular

В Angular рендеринг длинных списков может перегружать DOM, снижая производительность. CdkVirtualScrollViewport из Angular CDK решает эту проблему, рендеря только видимые элементы.

Пример:

<cdk-virtual-scroll-viewport itemSize="50" class="viewport">
  <div *cdkVirtualFor="let item of items" class="item">
    {{ item }}
  </div>
</cdk-virtual-scroll-viewport>

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

Дополнительно можно задать динамическую высоту элементов:

<cdk-virtual-scroll-viewport [itemSize]="getItemSize()" class="viewport">
  <div *cdkVirtualFor="let item of items" class="item">
    {{ item }}
  </div>
</cdk-virtual-scroll-viewport>

getItemSize() {
  return window.innerWidth > 768 ? 50 : 100;
}

Это позволяет адаптировать высоту элементов к ширине экрана, улучшая UX.

👉 @sWebDev