Boyama, sonunda kullanıcı ekranlarıyla birleştirilen piksellerin doldurulması işlemidir. Genellikle ardışık düzendeki tüm görevler arasında en uzun süren ve mümkünse kaçınılması gereken bir görevdir.
Boyama, sonunda kullanıcıların ekranlarıyla birleştirilen piksellerin doldurulmasıdır. Genellikle ardışık düzendeki tüm görevler arasında en uzun süren ve mümkünse kaçınılması gereken bir görevdir.
Özet
- Dönüşümler veya opaklık dışında herhangi bir özelliğin değiştirilmesi her zaman boyama işlemini tetikler.
- Boya, genellikle piksel ardışık düzeninin en pahalı bölümüdür. Mümkün olduğunca bu kısımlardan kaçının.
- Katman tanıtımı ve animasyonları düzenleyerek boyanacak alanları azaltın.
- Boyama karmaşıklığını ve maliyeti değerlendirmek için Chrome Geliştirici Araçları boya profil aracını kullanın; mümkün olan yerlerde azaltın.
Düzen ve Boyama Tetikleme
Herhangi bir öğenin geometrisinin değiştirilmesi, piksellerinin düzeltilmesi gerektiği anlamına geldiğinden, düzeni tetiklerseniz her zaman boyamayı tetiklersiniz!
Arka plan, metin rengi veya gölge gibi geometrik olmayan özellikleri değiştirirseniz de boyamayı tetikleyebilirsiniz. Bu durumlarda düzene gerek kalmaz ve ardışık düzen şöyle görünür:
Boyama sorunlarını hızlıca belirlemek için Chrome Geliştirici Araçları'nı kullanın
Boyanmış alanları hızlı bir şekilde tanımlamak için Chrome Geliştirici Araçları'nı kullanabilirsiniz. Oluşturma sekmesini açın ve ardından Boya Yanıp Sönme'yi etkinleştirin.
Bu seçenek etkinleştirildiğinde Chrome, boyama sırasında ekranı yeşil renkte yanıp söner. Ekranın tamamının yeşil renkte yanıp söndüğünü veya ekranın boyanması gerektiğini düşünmediğiniz bölümlerini görüyorsanız biraz daha ayrıntılı incelemelisiniz.
Hareket eden veya kaybolan öğeleri öne çıkarın
Boyama işlemi her zaman bellekteki tek bir resimle yapılmaz. Aslında tarayıcı, gerekirse birden çok resme veya birleştirici katmanına resim yapabilir.
Bu yaklaşımın avantajı, düzenli olarak yeniden boyanan veya ekranda dönüşümlerle hareket eden öğelerin diğer öğeleri etkilemeden işlenebilmesidir. Bu, tek tek katmanların nihai resmi oluşturmak üzere işlenip birleştirilebildiği Sketch, GIMP veya Photoshop gibi sanat paketlerinde olduğu gibidir.
Yeni bir katman oluşturmanın en iyi yolu will-change CSS özelliğini kullanmaktır. Bu komut Chrome, Opera ve Firefox'ta çalışır ve transform değeriyle yeni bir birleştirme katmanı oluşturur:
.moving-element {
will-change: transform;
}
will-change özelliğini desteklemeyen ancak katman oluşturma özelliğinden yararlanan tarayıcılarda (ör. Safari ve Mobile Safari), yeni bir katmanı zorunlu kılmak için 3D dönüştürme işlemini hatalı kullanmanız gerekir:
.moving-element {
transform: translateZ(0);
}
Ancak, her katman hem bellek hem de yönetim gerektirdiğinden, çok fazla katman oluşturmamaya dikkat edilmelidir. Yalnızca birleştirici özelliklerine bağlı kalın ve katman sayısını yönetme bölümünden bu konuda daha fazla bilgi edinebilirsiniz.
Bir öğeyi yeni bir katmana yükselttiyseniz bunun size performans avantajı sağladığını doğrulamak için Geliştirici Araçları'nı kullanın. Öğeleri profil çıkarmadan tanıtmayın.
Boyanmış alanları azaltın
Ancak bazen öğelerin öne çıkarılmasına rağmen boyanması gerekir. Boya sorunlarına karşı büyük bir zorluk, tarayıcıların boyanması gereken iki alanı birleştirmesidir, bu da tüm ekranın yeniden boyanmasına yol açabilir. Bu nedenle, örneğin sayfanın üst tarafında sabit bir başlık varsa ve ekranın alt kısmına bir şey boyanıyorsa ekranın tamamı yeniden boyanabilir.
Boya alanlarını azaltmak, genellikle animasyonlarınızı ve geçişlerinizi çok fazla çakışmayacak şekilde düzenlemek veya sayfanın belirli bölümlerine animasyon eklemekten kaçınmanın yollarını bulmaktır.
Boyama karmaşıklığını basitleştirin
Konu boyama olduğunda bazı şeyler diğerlerinden daha pahalıdır. Örneğin, bulanıklık içeren herhangi bir şeyin (ör. gölge) boyaması, kırmızı bir kutu çizmekten daha uzun sürer. Ancak CSS söz konusu olduğunda bu durum her zaman çok bariz değildir: background: red; ve box-shadow: 0, 4px, 4px, rgba(0,0,0,0.5); her zaman çok farklı performans özelliklerine sahip gibi görünmüyor olsa da gerçekte vardır.
Yukarıdaki boya profil aracı, efekt elde etmek için başka yollara bakmanız gerekip gerekmediğini belirlemenize olanak tanır. Nihai sonuca ulaşmak için daha ucuz bir stil grubu veya alternatif yöntemler kullanmanın mümkün olup olmadığını kendinize sorun.
Özellikle mobil cihazlarda, kare başına sahip olduğunuz 10 ms normalde boyama işlemini tamamlamak için yeterince uzun olmadığından, özellikle animasyonlar sırasında boyamamak için her zaman boyama yapmak isteyebilirsiniz.