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

Sanal kaydırma özelliğini uygulayarak 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 bir kontrol panelinde gezinirken kullanabileceğiniz, günümüzün en yaygın kullanıcı arayüzü kalıplarından biridir. Kaydırma listeleri ç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 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ı gidermek 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ı bir kerede oluşturulmak yerine, ekrana sığabilecek öğelerin yalnızca 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 gönderinin geri kalanında, temel sanal kaydırma özelliğinin nasıl ayarlanacağı 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ştururken 100.000 ayrı <div> öğesi oluşturmalıdır. Bu, basit metin düğümleri için iyi olabilir ancak tekrarlanan şablondaki karmaşıklık iyi ölçeklenmez ve etkinlik işleyicileri önemli ölçüde çoğalır.

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'da kaç öğenin tutulacağını ve uygun boyutta 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'ü *cdkVirtualFor'a 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);
}

Görünüm alanı, listenin tamamını iterasyonla işlemek yerine kullanıcı için listenin doğru alt kümesini dinamik olarak tanımlar ve iterasyonla işler. Artık kullanıcı sayfayı yüklediğinde CDK, listenin ekrana sığacak alt kümesini (ve biraz da arabellek) oluşturacaktır. Görüntüleme alanındaki tüm kaydırma etkinlikleri, listenin uygun alt kümesini yükleyip oluşturacaktır:

CDK, kullanıcı sayfayı kaydırırken bir listenin alt kümelerini 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 getirilebilir. 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.