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

Sanal kaydırma uygulayarak büyük listeleri daha duyarlı hale getirin.

Stephen Fluin

Kaydırma listesi, günümüzde en yaygın kullanıcı arayüzü kalıplarından biridir. İster en sevdiğiniz sosyal medya sitesindeki sonsuz kaydırılan feed'e göz atın ister kurumsal bir kontrol panelinde gezinmeyi deneyin. Kaydırma listeleri çok uzun hale geldiğinde (yüzlerce, binlerce veya yüz binlerce öğe) uygulama performansı düşebilir.

Büyük listelerin yüklenmesi yavaş olabilir çünkü uygulamanın tüm verileri önceden yüklemesi ve oluşturması gerekir. Listedeki her öğe zengin veri , medya ve işlevsellik içerebileceği için oluşturulmaları ve gezinmeleri de yavaş olabilir.

Kullanıcılar sayfayı yüklerken veya kaydırdığında sorun yaşayabilir, bu da hayal kırıklığına ve sayfadan vazgeçmeye neden olabilir.

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

Sanal kaydırma, bu ölçek problemlerini çözmek için kullanılan birincil tekniktir. 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ını veya sayfada oluşturmasını gerektirmeden listede gezinme olanağı sunar.

Angular'da sanal kaydırma, Bileşen Geliştirme Kiti (CDK) tarafından sağlanır. Listelerde iterasyon yapma şeklinizi değiştirerek ve birkaç ek yapılandırma parametresi sağlayarak CDK'nin sanal kaydırma özelliği, listelerinizin sanal oluşturma işlemini otomatik olarak yöneterek sayfa performansını ve yanıt verme hızını iyileştirir.

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

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

Sanal kaydırmayı ayarlama

Öncelikle en sevdiğiniz paket yöneticisini kullanarak @angular/cdk uygulamasını 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 ekleyin

CDK yüklüyken @angular/cdk/scrolling paketinden sanal kaydırmayı gerçekleştiren ScrollingModule öğesini içe aktarın. Ardından bunu 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ı listesiyle 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, basit metin düğümleri için iyi olabilir, ancak tekrarlanan şablondaki herhangi bir karmaşıklık iyi ölçeklenmez ve tüm etkinlik işleyiciler önemli ölçüde çarpılır.

Sanal kaydırma eklemek ve bu sorunları önlemek için listeyi bir <cdk-virtual-scroll-viewport> öğesiyle sarmalayarak 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, görüntü alanının yüksekliğini standart CSS aracılığıyla belirtmeniz gerekir. Ayrıca, itemSize belirterek görüntü alanına içeriği hakkında ipucu vermeniz gerekir. Modül, bu bilgileri, belirli bir anda DOM'de kaç öğenin tutulacağını ve uygun boyutlu bir kaydırma çubuğunun nasıl oluşturulacağını belirlemek için 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 değerini *cdkVirtualFor biçimine 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üntü alanı, listenin tamamını yinelemek yerine dinamik olarak tanımlayıp kullanıcı için doğru listenin alt kümesini tekrarlar. Artık kullanıcı sayfayı yüklediğinde CDK, listenin ekrana sığan alt kümesini (ve bir parça arabelleği) oluşturmalıdır ve görüntü alanındaki kaydırma etkinlikleri listenin uygun alt kümesini yükleyip oluşturur:

Daha da ileri

CDK'nin sanal kaydırma yetenekleri, bu temel örnekten çok daha ileri düzeydedir. Örnek uygulamada listenin tamamı bellekteydi ancak daha karmaşık uygulamalar için liste isteğe bağlı olarak alınabiliyordu. ScrollingModule ürününün diğer özellikleri ve cdkVirtualOf yönergesi hakkında daha fazla bilgi edinmek için CDK dokümanlarındaki Scrolling hakkında bilgi edinebilirsiniz.

Mr Cup / Fabien Barral tarafından Unsplash'teki hero resim.