Performans: Dönüştürülebilen ve Yeniden Boyama Gerektiren Özellikler
Hangi özelliklerin GPU hızlandırmalı olduğunu ve hangilerinin maliyetli yerleşim yeniden boyamalarını tetiklediğini öğrenin.
Performans: Dönüştürülebilen ve Yeniden Boyama Gerektiren Özellikler, CoddyKit'te ücretsiz bir CSS 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, CSS Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. CSS Academy kursu toplamda 4 dersten oluşur.
Oluşturma İşlem Hattı
Tarayıcılar oluşturma işlemini üç aşamada gerçekleştirir: Düzen (boyut + konum) → Boyama (pikseller) → Birleştirme (GPU katmanlarının birleştirilmesi). Daha erken aşamaları tetikleyen özellikleri canlandırmak maliyetlidir.
Düzeni Tetikleyen Özellikler
Bu özellikleri değiştirmek, tarayıcıyı potansiyel olarak tüm sayfanın düzenini yeniden hesaplamaya zorlar. Bunları canlandırmaktan kaçının:
width,heightmargin,paddingtop,leftfont-sizedisplay
Boyamayı Tetikleyen Özellikler
Bunlar düzeni atlar ancak pikselleri yeniden boyar. Orta düzeyde maliyetlidir:
background-colorcolorbox-shadowborder
Yalnızca Birleştirme Aşamasında Kullanılan Özellikler
Bunlar hem düzeni hem boyamayı atlar — tarayıcının yalnızca önceden rasterleştirilmiş katmanları birleştirmesi gerekir. Çok ucuzdur ve GPU tarafından hızlandırılır:
transformopacity
CSS Animasyonunun Altın Kuralı
Sorunsuz 60 fps animasyonlar için yalnızca transform ve opacity özelliklerini canlandırın. top/left yerine transform: translate(), display ile yapılan geçişler yerine opacity kullanın.
<div class="box demo-active">Box</div>will-change Özelliği
will-change, animasyon başlamadan önce bir öğeyi kendi GPU katmanına yükseltmesini tarayıcıya bildirir ve animasyonun ortasında oluşabilecek "yükseltme parlamasını" önler.
<div class="animated">Animated</div>will-change: auto
Animasyonlar tamamlandıktan sonra will-change: auto ayarlayın veya özelliği tamamen kaldırın. Çok fazla öğeyi yükseltilmiş durumda tutmak GPU belleğini gereksiz yere tüketir.
DevTools ile Ölçüm Yapma
Kare zamanlamasını kaydetmek ve incelemek için Chrome DevTools'un Performans sekmesini kullanın. Oluşturma sekmesindeki boyama yanıp sönmesi seçeneği, her karede hangi öğelerin yeniden boyandığını yeşil bir kaplamayla gösterebilir.
top/left Yerine transform
En etkili optimizasyon, konum animasyonlarını transform ile değiştirmektir:
<div class="fly demo-active">Fly</div>Renk Geçişinin Maliyeti
Arka plan rengi geçişleri yeniden boyamayı tetikler ancak düzeni tetiklemez. Küçük öğeler için kabul edilebilirdir. Büyük arka planlar için bunun yerine opacity geçişli bir sözde öğe kullanmayı düşünün:
<button class="btn demo-active">Hover me</button>contain Özelliği
contain özelliği, bir öğenin ve alt ağacının bağımsız olduğunu tarayıcıya bildirir. Bu, düzen geçersizleştirmesinin kapsamını sınırlandırarak yeniden boyama performansını artırır.
<div class="widget">Widget</div>Hızlı Kontrol
Düzenlemeyi veya boyamayı tetiklemeden birleştirme aşamasında canlandırılabilen iki CSS özelliği hangileridir?
Özet
Düzen özelliklerini (width, top, margin) canlandırmak maliyetli yeniden hesaplamaları tetikler. Boyama özellikleri (color, background) daha ucuzdur. Yalnızca transform ve opacity, düzenlemeyi veya boyamayı tetiklemeden GPU birleştirme aşamasında canlandırılabilir. Sorunsuz ve yüksek performanslı animasyonlar için her zaman bunları tercih edin.
Sıkça Sorulan Sorular
“Performans: Dönüştürülebilen ve Yeniden Boyama Gerektiren Özellikler” dersi ücretsiz mi?
Evet — “Performans: Dönüştürülebilen ve Yeniden Boyama Gerektiren Özellikler” 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 CSS Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. CSS Academy kursu toplamda 4 dersten oluşur.
“Performans: Dönüştürülebilen ve Yeniden Boyama Gerektiren Özellikler” dersinde ne öğreneceğim?
Hangi özelliklerin GPU hızlandırmalı olduğunu ve hangilerinin maliyetli yerleşim yeniden boyamalarını tetiklediğini öğrenin. CSS 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.
CSS Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te CSS 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.
“Performans: Dönüştürülebilen ve Yeniden Boyama Gerektiren Özellikler” 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 CSS Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her CSS 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
- Geçiş Özelliği Süresi ve Zamanlaması
- Yumuşatma İşlevleri: ease linear cubic-bezier
- Birden Fazla Özelliğe Geçiş Uygulama
- Performans: Dönüştürülebilen ve Yeniden Boyama Gerektiren Özellikler