Ö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.