Boyama, pikselleri doldurma işlemidir ve sonunda kullanıcıların isteklerine ekranları. Genellikle ardışık düzendeki tüm görevler arasında en uzun süreli olan ve mümkünse kaçınılması gereken bir görevdir.
Boya, nihai olarak birleştirilen pikselleri doldurma işlemidir. kullanıcıların ekranları. Genellikle Scrum Ekibi’ndeki tüm görevler arasında veya mümkünse kaçınılması gereken bir türdür.
Özet
- Dönüşüm veya opaklık dışında herhangi bir özelliğin değiştirilmesi her zaman boyamayı tetikler.
- Paint genellikle piksel ardışık düzeninin en pahalı kısmıdır. mümkün olduğunca 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 aracını kullanın. konusunda size yardımcı olmaktır.
Düzen ve Boyayı Tetikleme
Herhangi bir öğenin geometrisinin değiştirilmesi, piksellerinin düzeltilmesi gerektiği anlamına geleceğinden düzeni tetiklerseniz her zaman boyamayı tetiklersiniz.
Arka planlar, metin rengi veya gölgeler gibi geometrik olmayan özellikleri değiştirirseniz de boyama işlemini tetikleyebilirsiniz. Bu tür durumlarda düzen gerekli olmaz ve ardışık düzen şu şekilde görünür:
Boyayla ilgili performans sorunlarını hızla tespit etmek için Chrome Geliştirici Araçları'nı kullanın
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 Yanıp Sönen Boya'yı etkinleştirin.
Bu seçenek açık olduğunda, boyama işlemi sırasında Chrome 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 detaya inmeniz gerekir.
Hareket eden veya solan öğeleri tanıtın
Bellekteki tek bir resimde boyama her zaman 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 faydası, 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 will-change CSS özelliğini kullanmaktır. Bu komut Chrome, Opera ve Firefox'ta çalışacak ve transform değeriyle yeni bir birleştirici katmanı oluşturacaktır:
.moving-element {
will-change: transform;
}
will-change öğesini desteklemeyen ancak katman oluşturma özelliğinden yararlanan Safari ve Mobile Safari gibi tarayıcılarda yeni bir katmanı zorunlu kılmak için 3D dönüştürme yöntemini (yanlış) kullanmanız gerekir:
.moving-element {
transform: translateZ(0);
}
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 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 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. Bu nedenle, örneğin, sayfanın üst kısmında sabit bir başlığınız varsa ve ekranın alt kısmında çizilen bir şey varsa, tüm ekran 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ştirin
Resim söz konusu olduğunda bazı şeyler diğerlerinden daha pahalıdır. Örneğin, bulanıklık içeren bir şeyin (örneğin bir gölge gibi) boyanması, örneğin 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.
Yukarıdaki boyama profili oluşturucu, 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 veya alternatif yöntem kullanmanın mümkün olup olmadığını kendinize sorun.
Kare başına sahip olduğunuz 10 ms genelde, özellikle mobil cihazlarda boyama işlemini yapmak için yeterince uzun olmadığından, özellikle animasyonlar sırasında boyama yapmaktan her zaman kaçınmanız gerekebilir.