Boyama, sonunda kullanıcının ekranıyla birleştirilen pikselleri doldurma işlemidir. Genellikle ardışık düzendeki tüm görevler arasında en uzun süreli ve mümkünse kaçınılması gereken bir görevdir.
Özet
- Dönüşüm veya opaklık dışında herhangi bir özelliğin değiştirilmesi her zaman boyamayı tetikler.
- Boya, genellikle piksel ardışık düzeninin en pahalı kısmıdır. Mümkün olduğunda bu tür durumlardan kaçının.
- Katman tanıtımı ve animasyonların düzenlenmesi yoluyla boyama alanlarını azaltın.
- Boya işleminin karmaşıklığını ve maliyetini değerlendirmek için Chrome Geliştirici Araçları boya profili oluşturucuyu kullanın ve mümkün olduğunca azını yapın.
Düzen ve boyama nasıl tetiklenir?
Düzenlemeyi tetiklerseniz her zaman boyamayı da tetiklersiniz. Çünkü herhangi bir öğenin geometrisini değiştirmek, piksellerinin düzeltilmesi gerektiği anlamına gelir.
Arka plan, metin rengi veya gölgeler gibi geometrik olmayan özellikleri değiştirirseniz de boyama işlemini tetikleyebilirsiniz. Bu gibi durumlarda düzene gerek yoktur ve ardışık düzen şu şekilde görünür:
Boyama darboğazlarını hızlıca belirlemek için Chrome Geliştirici Araçları'nı kullanma
Boyanmakta olan alanları hızlıca belirlemek 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 işlemi her gerçekleştiğinde ekranı yeşil renkte yanıp söner. Ekranın tamamının yeşil renkte yanıp söndüğünü veya ekranın boyanmaması gerektiğini düşündüğünüz alanların boyandığını görüyorsanız biraz daha ayrıntılı inceleme yapmanız gerekir.
Hareket eden veya kaybolan öğeleri öne çıkarma
Boyama işlemi her zaman bellekte tek bir resimle yapılmaz. Aslında, tarayıcının gerektiğinde birden fazla resim veya birleştirici katmanı boyaması mümkündür.
Bu yaklaşımın avantajı, düzenli olarak yeniden boyanan veya ekranda dönüşümlerle hareket eden öğelerin diğer öğeler etkilenmeden işlenebilmesidir. Bu işlem Sketch, GIMP veya Photoshop gibi resim paketleriyle aynıdır. Bu paketlerde, tek tek katmanlar işlenip nihai resmi oluşturmak için üst üste birleştirilebilir.
Yeni bir katman oluşturmanın en iyi yolu, tüm modern tarayıcı motorlarında bulunan will-change CSS özelliğini kullanmaktır. transform değerini kullanan will-change, yeni bir birleştirici katmanı oluşturur:
.moving-element {
will-change: transform;
}
Bununla birlikte, her katman hem bellek hem de yönetim gerektirdiğinden, çok fazla katman oluşturmamaya dikkat edilmelidir. Yalnızca birleştirici özelliklerine bağlı kalma ve katman sayısını yönetme bölümünde bu konuyla ilgili daha fazla bilgi bulabilirsiniz.
Bir öğeyi yeni bir katmana taşıdıysanız bu işlemin performans açısından size avantaj sağladığını doğrulamak için DevTools'u kullanın. Öğeleri profil oluşturmadan tanıtmayın.
Boya alanlarını azaltma
Ancak bazen, öğeleri öne çıkarmaya rağmen boyama işlemi yapılması gerekir. Boyama sorunlarının büyük bir zorluğu, tarayıcıların boyanması gereken iki alanı bir araya getirmesidir ve bu, tüm ekranın yeniden boyanmasına yol açabilir. Örneğin, sayfanın üst kısmında sabit bir başlık varsa ve ekranın alt kısmında bir şey boyanıyorsa ekranın tamamı yeniden boyanabilir.
Boyama alanlarını azaltmak genellikle animasyonlarınızı ve geçişlerinizi çok fazla örtüşmeyecek şekilde düzenlemek veya sayfanın belirli bölümlerinin animasyonlu olmasını önlemek için yöntemler bulmak anlamına gelir.
Boya karmaşıklığını basitleştirin
Boya konusunda bazı şeyler diğerlerinden daha pahalıdır. Örneğin, bulanıklık içeren her şeyin (ör. gölge) boyanması, kırmızı bir kutu çizmekten daha uzun sürer. Ancak CSS açısından bu durum her zaman açık değildir: background: red; ve box-shadow: 0, 4px, 4px, rgba(0,0,0,0.5);'ün performans özellikleri çok farklı görünmeyebilir ancak öyledir.
Önceki ekran görüntüsünde gösterildiği gibi boya profilleyici, efekt elde etmek için başka yöntemlere bakmanız gerekip gerekmediğini belirlemenize olanak tanır. Nihai hedefinize ulaşmak için daha ucuz bir stil grubu veya alternatif yöntemler kullanıp kullanamayacağınızı kendinize sorun.
Özellikle animasyonlarda, kare başına sahip olduğunuz 10 ms normalde özellikle mobil cihazlarda boyama işlemini tamamlamak için yeterli olmadığından, mümkün olduğunda boyamayı her zaman kullanmaktan kaçının.