Angular CDK ile büyük listeleri sanallaştırın

Sanal kaydırmayı kullanarak büyük listeleri daha duyarlı hale getirin.

Stephen Fluin

Kaydırmalı liste, en sevdiğiniz sosyal medya sitesinde sonsuz kaydırmalı bir feed'e göz atarken veya kurumsal kontrol panelinde gezinirken kullanabileceğiniz, günümüzün en yaygın kullanıcı arayüzü kalıplarından biridir. Kaydırılabilir listeler çok uzun olduğunda (yüzlerce, binlerce veya yüz binlerce öğe) uygulama performansı etkilenebilir.

Uygulamanın tüm verileri önceden yükleyip oluşturması gerektiğinden büyük listelerin yüklenmesi yavaş olabilir. Ayrıca, listedeki her öğenin zengin verileri, medyası ve işlevleri olabileceğinden, oluşturma ve gezinme işlemleri yavaş olabilir.

Kullanıcılar sayfayı yüklerken veya sayfayı kaydırırken sorun yaşayabilir. Bu da kullanıcıların canını sıkabilir ve sayfayı terk etmelerine neden olabilir.

Bileşen Geliştirme Kiti ile Angular'da sanal kaydırma

Bu ölçek sorunlarını ele almak için kullanılan birincil teknik sanal kaydırmadır. Sanal kaydırma, uygun boyutta bir kaydırma çubuğu sağlayarak çok büyük bir liste izlenimi verir ve uygulamanın listenin tamamını bellekte tutmasına veya sayfada oluşturmasına gerek kalmadan listede gezinme olanağı sunar.

Angular'da sanal kaydırma, Bileşen Geliştirme Kiti (CDK) tarafından sağlanır. CDK'nın sanal kaydırma özelliği, listelerde yineleme yapma şeklinizi değiştirerek ve birkaç ek yapılandırma parametresi sağlayarak listelerinizin sanal oluşturma işlemini otomatik olarak yönetir. Böylece sayfa performansı ve duyarlılığı iyileşir.

Listenin tamamını tek seferde oluşturmak yerine, öğelerin yalnızca ekrana sığan bir alt kümesi (ve küçük bir arabellek) oluşturulur. Kullanıcı gezinirken yeni bir öğe alt kümesi hesaplanır ve oluşturulur. İstenirse mevcut DOM yeniden kullanılır.

Bu yayının geri kalanında, temel sanal kaydırmayı nasıl ayarlayacağınız adım adım açıklanmaktadır. Bu örnek uygulamada çalışan bir örneğin tamamını görebilirsiniz:

Sanal kaydırma özelliğini ayarlama

Öncelikle, en sevdiğiniz paket yöneticisini kullanarak @angular/cdk'ü yüklediğinizden emin olun. npm kullanarak yüklemek için terminalde şu komutu çalıştırın:

npm install --save @angular/cdk

Uygulamanıza ScrollingModule ekleme

CDK yüklüyken sanal kaydırmayı yöneten ScrollingModule öğesini @angular/cdk/scrolling paketinden içe aktarın. Ardından, modülünüzün imports dizisine ekleyin:

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

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

Görüntü alanı oluşturma

Paketin nasıl çalıştığını görmek için 0 ile 99.999 arasında basit bir sayı listesi içeren bir bileşen oluşturmayı deneyin:

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

Tarayıcı uygulamayı oluşturduğunda, 100.000 ayrı <div> öğesi oluşturması gerekir. Bu durum, basit metin düğümleri için sorun teşkil etmez ancak tekrarlanan şablondaki herhangi bir karmaşıklık iyi ölçeklenmez ve etkinlik işleyiciler önemli ölçüde artar.

Sanal kaydırma eklemek ve bu sorunlardan kaçınmak için listeyi bir <cdk-virtual-scroll-viewport> öğesine sarmalayarak bir görüntü alanı oluşturmanız gerekir:

@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, listenin alt kümelerini dinamik olarak oluşturduğundan, standart CSS aracılığıyla görünümün yüksekliğini belirtmeniz gerekir. Ayrıca itemSize değerini belirterek görüntü alanının içeriği hakkında bir ipucu vermeniz gerekir. Modül, belirli bir zamanda DOM'de kaç öğe tutulacağını ve uygun boyutlu bir kaydırma çubuğunun nasıl oluşturulacağını belirlemek için bu bilgileri kullanır.

@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);
}

Son olarak, *ngFor öğesini *cdkVirtualFor olarak dönüştürün:

@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);
}

Listenin tamamını yinelemek yerine, görüntü alanı dinamik olarak tanımlanıp listenin kullanıcı için doğru alt kümesi boyunca yinelenir. Artık kullanıcı sayfayı yüklediğinde CDK, listenin ekrana sığacak alt kümesini (ve biraz arabellek) oluşturmalıdır. Görüntüleme alanındaki tüm kaydırma etkinlikleri, listenin uygun alt kümesini yükleyip oluşturur:

Daha fazla bilgi

CDK'nın sanal kaydırma özellikleri bu temel örnekten çok daha fazlasını kapsar. Örnek uygulamada listenin tamamı bellekteydi, ancak daha karmaşık uygulamalar için liste isteğe bağlı olarak getirebiliyordu. CDK belgelerinde Scrolling hakkında bilgi edinerek ScrollingModule ve cdkVirtualOf yönergesinin diğer özellikleri hakkında daha fazla bilgi edinebilirsiniz.

Unsplash'taki Mr Cup / Fabien Barral tarafından oluşturulan lokomotif resim.