Boyama, sonunda kullanıcının ekranında birleştirilecek pikselleri doldurma işlemidir. Genellikle ardışık düzendeki tüm görevler arasında en uzun süre çalışan ve mümkün olduğunca kaçınmanız gerekir.
Özet
- Dönüşümler veya opaklık dışındaki herhangi bir özelliğin değiştirilmesi her zaman boyamayı tetikler.
- Boya, genellikle piksel ardışık düzeninin en pahalı parçasıdır. Mümkün olduğunda bu tür durumlardan kaçının.
- Katman tanıtımı ve animasyonların koordinasyonu yoluyla boyama alanlarını azaltın.
- Boya karmaşıklığını ve maliyetini değerlendirmek için Chrome Geliştirici Araçları boya profilleyicisini kullanın ve mümkün olduğunda maliyetleri azaltı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 planlar, metin rengi veya gölgeler gibi geometrik olmayan özellikleri değiştirirseniz de boyama işlemini tetikleyebilirsiniz. Böyle durumlarda düzen gerekli olmaz 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
Boyanan alanları hızlı bir şekilde tespit etmek 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 ekranda boyanması gerektiğini düşünmediğiniz kısımlarını görüyorsanız, biraz daha derine inmeniz 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 gerekirse birden çok resme veya birleştirici katmanlarına 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 önemli modern tarayıcı motorlarında kullanılabilen will-change CSS özelliğini kullanmaktır. will-change, transform değerini kullanarak yeni bir birleştirme katmanı oluşturur:
.moving-element {
will-change: transform;
}
Ancak her katman hem bellek hem de yönetim gerektirdiğinden çok fazla katman oluşturmamaya dikkat edilmelidir. Bu konuda daha fazla bilgiyi Yalnızca birleştirici mülkleri kullanma ve katman sayısını yönetme bölümünde bulabilirsiniz.
Bir öğeyi yeni bir katmana yükselttiyseniz bu işlemin performans artışı sağladığını doğrulamak için Geliştirici Araçları'nı kullanın. Öğeleri profil çıkarmadan tanıtmayın.
Boyalı alanları azaltın
Ancak bazen, öğeler tanıtılsa da boyama yapılması gerekir. Boyama sorunlarının en büyük zorluklarından biri, tarayıcıların boyanması gereken iki alanı birleştirmesidir. Bu da ekranın tamamının yeniden boyanmasına neden olabilir. Ö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.
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ümlerini canlandırmaktan kaçınmanın yollarını bulmaktır.
Boya karmaşıklığını basitleştirme
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 her zaman bariz değildir: background: red; ve box-shadow: 0, 4px, 4px, rgba(0,0,0,0.5); çok farklı performans özelliklerine sahip gibi görünmese de özellikleri aynıdır.
Önceki ekran görüntüsünde gösterildiği gibi boya profili oluşturucu, efektler elde etmek için başka yollara 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.
Kare başına sahip olduğunuz 10 ms genelde, özellikle mobil cihazlarda boyama işlemi yapılmasını sağlayacak kadar uzun olmadığından, özellikle animasyonlar sırasında boyama yapmaktan her zaman kaçınmanız gerekebilir.