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

Sanal kaydırmayı uygulayarak büyük listelerin daha hızlı yanıt vermesini sağlayın.

Stephen Fluin

Günümüzde en yaygın kullanıcı arayüzü kalıplarından biri olan kaydırma listesi, ister en sevdiğiniz sosyal medya sitesinde sonsuz kaydırmalı bir feed'e göz atarken ister bir kurumsal kontrol panelinde gezinirken karşınıza çıkar. Kaydırılan listeler çok uzun olduğunda (yüzlerce, binlerce veya yüz binlerce öğe) uygulama performansı olumsuz 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 öğe zengin veriler, medya ve işlevler içerebileceğinden oluşturulması ve gezinilmesi yavaş olabilir.

Kullanıcılar sayfayı yüklerken veya kaydırırken sorun yaşayabilir. Bu durum, kullanıcıların hayal kırıklığına uğramasına ve sayfayı terk etmesine neden olur.

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

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

Angular'da sanal kaydırma, Component Dev Kit (CDK) tarafından sağlanır. Listelerde yineleme yapma şeklinizi değiştirerek ve birkaç ek yapılandırma parametresi sağlayarak CDK'nın sanal kaydırma özelliği, listelerinizin sanal olarak oluşturulmasını otomatik olarak yönetir. Bu sayede sayfa performansı ve yanıt verme hızı iyileştirilir.

Listenin tamamı tek seferde oluşturulmak yerine, yalnızca ekrana sığan öğelerin bir alt kümesi (küçük bir arabellekle birlikte) oluşturulur. Kullanıcı gezinirken öğelerin yeni bir 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ırmanın nasıl ayarlanacağı açıklanmaktadır. Çalışan tam bir örneği şu örnek uygulamada görebilirsiniz:

Sanal kaydırmayı 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üklendikten sonra ScrollingModule paketinden sanal kaydırmayı işleyen @angular/cdk/scrolling öğesini 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ındaki sayıların listesini 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> öğeyi oluşturması gerekir. Bu durum temel metin düğümleri için sorun olmayabilir ancak tekrarlanan şablondaki karmaşıklık iyi ölçeklenmez ve tüm etkinlik dinleyicileri ö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ünüm 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ünüm alanının yüksekliğini standart CSS ile belirtmeniz gerekir. Ayrıca itemSize değerini belirterek görünüm penceresine içeriği hakkında bir ipucu vermeniz gerekir. Modül, bu bilgileri kullanarak DOM'da belirli bir anda kaç öğe tutulacağını ve uygun boyutta bir kaydırma çubuğunun nasıl oluşturulacağını belirler.

@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 değerine 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, kullanıcı için listenin doğru alt kümesini dinamik olarak tanımlar ve bu alt küme üzerinde yineleme yapar. Artık kullanıcı sayfayı yüklediğinde CDK, ekrana sığan liste alt kümesini (biraz arabellek ile birlikte) oluşturmalıdır. Ayrıca, görünüm 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 örneğin çok ötesine geçer. Örnek uygulamada listenin tamamı bellekteydi ancak daha karmaşık uygulamalarda liste isteğe bağlı olarak getirilebilir. ScrollingModule ve cdkVirtualOf yönergesinin diğer özellikleri hakkında daha fazla bilgi edinmek için CDK belgelerinde Scrolling hakkında bilgi edinin.