@defer ile Ertelenmiş Yükleme
Şablon bölümlerini @defer ile tembel olarak yükleyin.
@defer ile Ertelenmiş Yükleme, CoddyKit'te ücretsiz bir Angular Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Angular Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Angular Academy kursu toplamda 4 dersten oluşur.
defer ile Ertelenmiş Yükleme
at-defer bloğu, bir şablonun ve bağımlılıklarının bir bölümünü tembel olarak yükleyerek ilk yükleme performansını artırır. Ertelenen içerik ayrı bir parçaya bölünür.
Temel defer Söz Dizimi
İçeriği bir at-defer bloğunun içine sarınız. Varsayılan olarak tarayıcı boşta olduğunda yüklenir.
// @defer {
// <app-heavy-chart></app-heavy-chart>
// }defer Neden Kullanılır
Ağır veya ekranın alt kısmında bulunan bileşenleri ertelemek, ilk paketi küçük ve ilk görüntüyü hızlı tutar. Bileşen yalnızca gerçekten gerektiğinde yüklenir.
placeholder Bloğu
at-placeholder bloğu, ertelenen blok tetiklenmeden önce içeriğin gösterileceği alanı belirtir.
// @defer {
// <app-comments></app-comments>
// } @placeholder {
// <p>Comments will load soon</p>
// }Yükleme bloğu
at-loading bloğu, ertelenen parça alınırken gösterilir.
// @defer {
// <app-comments></app-comments>
// } @loading {
// <p>Loading comments...</p>
// }Hata bloğu
at-error bloğu, ertelenen bağımlılıklar yüklenemediğinde oluşturulur.
// @defer {
// <app-comments></app-comments>
// } @error {
// <p>Failed to load comments</p>
// }Tetikleyiciler
Yüklemenin ne zaman başlayacağını, on koşulundaki tetikleyicilerle kontrol edebilirsiniz. Örneğin on idle, on viewport, on interaction, on hover veya on timer kullanabilirsiniz.
// @defer (on viewport) {
// <app-chart></app-chart>
// }on viewport
on viewport tetikleyicisi, içerik görünüm alanına kaydırılarak girdiğinde yükleme yapar. Bu, ekranın aşağısında kalan bölümler için idealdir.
on interaction ve on hover
on interaction, kullanıcı yer tutucuya tıkladığında veya yer tutucuya odaklandığında yükleme yapar; on hover ise işaretçi yer tutucunun üzerine geldiğinde yükleme yapar.
// @defer (on interaction) {
// <app-editor></app-editor>
// } @placeholder {
// <button>Open editor</button>
// }when koşulu
when kullanarak bir boole ifadesine göre de tetikleme yapabilirsiniz. Yükleme, ifade true olduğunda başlar.
// @defer (when shouldLoad()) {
// <app-details></app-details>
// }Önceden getirme
Ertelenen parçayı oluşturma işleminden bağımsız olarak önceden getirebilirsiniz. Örneğin on idle ile önceden getirme yaparak oluşturma tetikleyicisi çalışmadan önce parçanın hazır olmasını sağlayabilirsiniz.
// @defer (on viewport; prefetch on idle) {
// <app-chart></app-chart>
// }Kısa kontrol: defer
Ertelenen içeriği tetikleme.
Özet: Ertelenen yükleme
Atıl yükleme için at-defer bloğunu; at-placeholder, at-loading ve at-error bloklarını; on idle, on viewport, on interaction, on hover, on timer ve when gibi tetikleyicileri ve ayrıca önceden getirmeyi öğrendiniz. Yerleşik Kontrol Akışı kursunu tamamladınız.
Sıkça Sorulan Sorular
“@defer ile Ertelenmiş Yükleme” dersi ücretsiz mi?
Evet — “@defer ile Ertelenmiş Yükleme” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Angular Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Angular Academy kursu toplamda 4 dersten oluşur.
“@defer ile Ertelenmiş Yükleme” dersinde ne öğreneceğim?
Şablon bölümlerini @defer ile tembel olarak yükleyin. Angular Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Angular Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Angular Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.
“@defer ile Ertelenmiş Yükleme” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Angular Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Angular Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- @if ile Koşullu Görüntüleme
- @for ile Döngü
- @switch ile Seçim
- @defer ile Ertelenmiş Yükleme