CSS ve çizim performansı
Seçici maliyetini ve stil hesaplama, yerleşim, boyama sürelerini ölçer; içerik görünürlüğü ve sınırlama gibi araçlarla büyük sayfaları akıcı hale getirirsin.
Seviye 501 · 13 ders · 12 pratik lab
Dersler
Ölçmek
- Çizim profilini okumak: stil, yerleşim, boyama
- Stil yeniden hesaplamanın maliyeti
- Zorunlu eşzamanlı yerleşim ve yerleşim çalkantısı
- Kısa görev: yavaş bir sayfanın çizim profilini çıkar
Azaltmak
- contain ile işi sınırlamak
- content-visibility ile görünmeyeni atlamak
- Katmanlar, birleştirme ve bellek
- Kritik CSS ve yükleme sırası
- Yazı tipi yükleme: font-display ve alt kümeler
- Kısa görev: on bin satırlık listeyi akıcı yap
Kararlılık
- Yerleşim kaymasını CSS ile önlemek
- CSS boyut bütçesi ve dosyayı bölmek
- Bitirme görevi: ağır bir sayfayı ölç, düzelt, kanıtla
Pratik lablar
- Çizim profilini oku: Yavaş sayfanın performans kaydında stil, düzen ve boyama sürelerini ayırıp en pahalı adımı bul.
- Pahalı seçiciyi bul: Stil yeniden hesaplaması uzun süren sayfada sorunlu seçicileri bulup sadeleştir ve süreyi yeniden ölç.
- Düzen sarsıntısını ortadan kaldır: Döngüde okuma ve yazmayı karıştıran kodu toplu okuma-yazmaya çevirip zorunlu düzenleri sıfıra indir.
- contain ile işi sınırla: Sık güncellenen sohbet kutusuna contain ekleyip düzenin sayfanın geri kalanına yayılmasını engelle.
- Görünmeyeni content-visibility ile atla: Uzun bir SSS sayfasında ekran dışı bölümlere content-visibility uygulayıp ilk çizim süresini ölç.
- On bin satırlık listeyi akıcı yap: Takılan uzun listeyi containment, sanal kaydırma ve uygun katmanlarla 60 karede kaydırılabilir hale getir.
- Yazı tipi yüklemesini ayarla: Görünmez metin süresini font-display ile kısalt ve gereksiz ağırlıkları kaldır.
- Fazla katman belleğini azalt: Her öğeye will-change verilmiş sayfada katman sayısını ve bellek kullanımını ölçüp gereksiz olanları kaldır.
- Kritik CSS'i ayır: Ana sayfanın ilk ekranı için kritik CSS'i satır içine al, geri kalanını ertele ve ilk çizim kazancını kanıtla.
- Kayan reklam alanını sabitle: Geç yüklenen tanıtım alanına yer ayırarak düzen kaymasını sıfıra yakın indir.
- Yazı tipi değişiminden doğan kaymayı gider: Yedek yazı tipi ölçülerini size-adjust ile eşleştirip yazı tipi yüklenince oluşan kaymayı kaldır.
- CSS boyut bütçesi koy ve uygula: Sayfa başına CSS bütçesi belirle, paketleri böl ve bütçe aşıldığında derlemeyi durduran kontrolü ekle.
Kurs hakkında
Seçici maliyetini ve stil hesaplama, yerleşim, boyama sürelerini ölçer; içerik görünürlüğü ve sınırlama gibi araçlarla büyük sayfaları akıcı hale getirirsin.
Ne öğreneceksin
Ön koşullar
Aynı yolun 401 düzeyine kadar olan konularında deneyimli olmalısın.
Lab ortamı
Dersler, tarayıcında açılan sana özel bir Kali Linux masaüstünde geçer; araçlar pencereli arayüzleriyle hazırdır. Kurulum gerekmez, bilgisayar ekranı önerilir.
Sık sorulan sorular
- Bu kurs benim düzeyime uygun mu?
- Kurs 501 düzeyindedir; daha düşük düzeydeki kursların konularını bildiğin varsayılır.
- Kurulum gerekir mi?
- Hayır. Her ders tarayıcında açılan sana özel bir lab ortamında geçer.
- Dersler nasıl işleniyor?
- Her ders 8 ile 10 adımdan ve bir kısa sınavdan oluşur. İlk adımlarda yazman gereken komut gösterilir, sonraki adımlarda yardım azalır; iki denemede takılırsan çözüm açılır.
- Ücretsiz deneyebilir miyim?
- Evet. Her kursun ilk üç dersi ücretsizdir.