Will-change
will-change ile performans ipucu vermeyi öğrenirsin.
will-change ile performans ipucu
will-change özelliği tarayıcıya bir öğenin yakında nasıl değişeceğini söyler. Tarayıcı, o öğe için önceden bir kompozisyon katmanı (compositor layer) oluşturur ve animasyonu pürüzsüz yapar.
Örneğin .card { will-change: transform; } yazınca tarayıcı kartı ayrı bir katmana alır. Kart hareket ettiğinde yalnız composite çalışır; layout ve paint atlanır.
will-change kötüye kullanımı
will-change güçlü bir ipucudur ama her öğeye yazılmaz. Her will-change değeri yeni bir katman oluşturur; katmanlar bellek tüketir. Yüzlerce katman biriktirirse tarayıcı yavaşlar.
Doğru kullanım: animasyondan hemen önce ekle, bitince kaldır. Kalıcı will-change yalnızca sürekli dönen bir öğe gibi özel durumlarda mantıklıdır.
Uygulama will-change ile kart hover animasyonu hazırla
Aşağıdaki CSS'i tamamla. .card bildirimine will-change: transform ve transition: transform 0.2s ease ekle. .card:hover bildiriminde transform: scale(1.04) olsun.
Örnek çözümü göster
/* kart hover animasyonu */
.card {
will-change: transform;
transition: transform 0.2s ease;
}
.card:hover {
transform: scale(1.04);
}Kendini test et
-
will-change ne zaman kullanılır?
- Tüm öğelere, önlem için
- Sayfa yüklendiğinde, kalıcı olarak
- Yalnız estetik için, performans olmadan
- Animasyon öncesi, kısa süreli
Cevabı göster
Animasyon öncesi, kısa süreli — Doğru. will-change animasyon öncesi eklenir, bitince kaldırılır; kalıcı kullanım bellek tüketir.
-
will-change değerini yaz
.card { /* hover animasyonu için */ will-change: ____; }Cevabı göster
.card { /* hover animasyonu için */ will-change: transform; } -
will-change değerini anlamına eşle
- transform
- Hareket ve ölçekleme
- opacity
- Saydamlık değişimi
- scroll-position
- Kaydırma animasyonu
- contents
- İçerik değişimi
- auto
- Standart davranış