Özet - Hızlı kart listesi

Performans teknikleriyle hızlı kart listesi kurarsın.

Hızlı kart listesi nasıl kurulur?

Hızlı bir kart listesi dört teknik üzerine kurulur. Önce verimli seçici: .card gibi tek sınıf, derin torun seçicilerden hızlıdır. Sonra contain: .card-list ve .card bildirimlerine izolasyon verir.

Hover animasyonu için transform kullanırsın; layout tetiklemez. Öncesinde will-change: transform yazıp katmanı hazırlarsın. Dördü birleşince uzun liste akıcı kayar.

contain ve will-change birlikte

Uzun kart listesinde iki teknik birlikte çalışır. contain: content her kartı dış etkilerden izole eder; tek kart değişince tüm liste yeniden hesaplanmaz. will-change: transform kart için ayrı katman hazırlar.

Birleşince hover animasyonu yalnız o kartın katmanında çalışır; liste akıcı kalır. Ama will-change'i yalnız hover edilecek kartlara uygula; tümüne yazmak bellek şişirir.

Uygulama Hızlı kart listesini kur

Aşağıdaki CSS'i tamamla. .card-list bildiriminde display: grid ve contain: content olsun. .card bildiriminde contain: layout paint olsun. .card-title bildiriminde font-size: 1.25rem olsun.

Örnek çözümü göster

/* hızlı kart listesi */
.card-list {
  display: grid;
  contain: content;
}

.card {
  contain: layout paint;
}

.card-title {
  font-size: 1.25rem;
}

Uygulama Kart hover animasyonunu ekle

Aşağıdaki CSS'i tamamla. .card bildirimine transition: transform 0.2s ease ekle. .card:hover bildiriminde transform: scale(1.03) ve will-change: transform olsun.

Örnek çözümü göster

/* kart hover animasyonu */
.card {
  transition: transform 0.2s ease;
}

.card:hover {
  transform: scale(1.03);
  will-change: transform;
}

Kendini test et

Teknikleri amacına eşle

.card sınıfı

Verimli seçici
contain: content

İzolasyon
transform: scale

Hover animasyonu
will-change: transform

Katman hazırlığı
color: red

Sadece paint
En maliyetli render işlemi hangisidir?
- Composite
- Layout
- Paint
- Style
Cevabı göster

Layout — Doğru. Layout tüm dizilimi yeniden hesaplar; en pahalı aşamadır.

Sıradaki ders: Houdini nedir?

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler