Sanal kaydırma özelliğini uygulayarak büyük listeleri daha duyarlı hale getirin.
Kaydırma listesi, günümüzde en yaygın kullanıcı arayüzü kalıplarından biridir. Bu kalıp, en sevdiğiniz sosyal medya sitesinde sonsuz kaydırma özelliğine sahip bir feed'e göz atarken veya kurumsal bir kontrol panelinde gezinirken kullanılır. Kaydırılabilir listeler çok uzun olduğunda (yüzlerce, binlerce veya yüz binlerce öğe) uygulama performansı düşebilir.
Uygulamanın tüm verileri önceden yüklemesi ve oluşturması gerektiğinden, büyük listelerin yüklenmesi yavaş olabilir. Ayrıca, listedeki her öğe zengin veri, medya ve işlevsellik içerebileceğinden, oluşturulması ve gezinmesi yavaş olabilir.
Kullanıcılar sayfayı yüklerken veya kaydırırken sorun yaşayabilir. Bu da hayal kırıklığına ve sayfanın terk edilmesine neden olur.
Component Dev Kit ile Angular'da sanal kaydırma
Sanal kaydırma, bu ölçek sorunlarını gidermek için kullanılan birincil tekniktir. Sanal kaydırma, uygun boyutta bir kaydırma çubuğu ve uygulamanın tüm listeyi 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. Listeler arasında gezinme ş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önetir. Böylece sayfa performansını ve yanıt verme hızını artırır.
Listenin tamamını tek seferde oluşturmak yerine, yalnızca ekrana sığan öğelerin 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ırmanın nasıl ayarlanacağı açıklanmaktadır. Bu örnek uygulamada çalışan bir örneğin tamamını görebilirsiniz:
Sanal kaydırma ayarlanıyor
Öncelikle, tercih ettiğiniz paket yöneticisini kullanarak @angular/cdk aracı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 sanal kaydırmayı işleyen 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 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ştururken 100.000 ayrı <div> öğesi oluşturması gerekir. Bu, temel metin düğümleri için uygun olabilir ancak tekrarlanan şablondaki karmaşıklık iyi ölçeklenmez ve etkinlik işleyiciler önemli ölçüde çoğalır.
Sanal kaydırma eklemek ve bu sorunları önlemek için listeyi bir <cdk-virtual-scroll-viewport> öğesine 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 ile belirtmeniz gerekir. Ayrıca itemSize değerini belirterek görüntü alanına içeriği hakkında bir ipucu vermeniz gerekir. Modül, bu bilgileri kullanarak belirli bir zamanda DOM'da 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ı, tüm listeyi yinelemek yerine, kullanıcı için listenin doğru alt kümesini dinamik olarak tanımlar ve yineler. Kullanıcı sayfayı yüklediğinde CDK, listenin ekrana sığan alt kümesini (ve biraz da arabelleği) oluşturur. Görüntü alanındaki kaydırma etkinlikleri, listenin uygun alt kümesini yükleyip oluşturur:
Daha fazlasını yapma
CDK'nin sanal kaydırma özellikleri bu basit örnekten çok daha fazlasını sunar. Ö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 belgelerindeki Scrolling bölümünü okuyabilirsiniz.