Kompozitleme, sayfanın boyanmış bölümlerinin ekranda gösterilmek üzere bir araya getirildiği işlemdir.
Birleştirme, sayfanın boyanmış kısımlarının ekranda görüntülenmek üzere bir araya getirildiği yerdir.
Bu alanda sayfa performansını etkileyen iki önemli faktör vardır: yönetilmesi gereken birleştirici katmanlarının sayısı ve animasyonlar için kullandığınız özellikler.
Özet
- Animasyonlarınızda dönüşüm ve opaklık değişikliklerine bağlı kalın.
will-changeveyatranslateZile hareket eden öğeleri öne çıkarın.- Promosyon kurallarını aşırı kullanmaktan kaçının. Katmanlar bellek ve yönetim gerektirir.
Animasyonlar için dönüşüm ve opaklık değişikliklerini kullanma
Piksel ardışık düzeninin en iyi performans gösteren sürümü, hem düzen hem de boyama işleminden kaçınır ve yalnızca birleştirme değişiklikleri gerektirir:
Bunu başarmak için yalnızca derleyici tarafından yönetilebilecek özellikleri değiştirmeniz gerekir. Bugün bu doğru olan yalnızca iki özellik vardır: transform ve opacity:
transform ve opacity kullanımıyla ilgili uyarı, bu özellikleri değiştirdiğiniz öğenin kendi kompozisyon katmanında olması gerektiğidir. Katman oluşturmak için öğeyi tanıtmanız gerekir. Bu konuyu bir sonraki bölümde ele alacağız.
Animasyon eklemeyi planladığınız öğeleri öne çıkarma
"Boya karmaşıklığını basitleştirme ve boya alanlarını azaltma" bölümünde de belirttiğimiz gibi, animasyonlu hale getirmeyi planladığınız öğeleri (aşırıya kaçmadan) kendi katmanlarına taşımanız gerekir:
.moving-element {
will-change: transform;
}
Veya eski tarayıcılarda ya da desteklemeyen tarayıcılarda değişecek:
.moving-element {
transform: translateZ(0);
}
Katmanları yönetin ve katman patlamalarını önleyin
Bu durumda, katmanların genellikle performansa yardımcı olduğunu bilmek, sayfanızdaki tüm öğeleri aşağıdaki gibi bir şekilde tanıtmak cazip gelebilir:
* {
will-change: transform;
transform: translateZ(0);
}
Bu, sayfadaki her bir öğeyi tanıtmak istediğinizi dolaylı bir şekilde ifade eder. Buradaki sorun, oluşturduğunuz her katmanın bellek ve yönetim gerektirmesi ve bunun ücretsiz olmamasıdır. Hatta, belleği sınırlı olan cihazlarda performans üzerindeki etkisi, katman oluşturmanın avantajlarından çok daha ağır basabilir. Her katmanın dokularının GPU'ya yüklenmesi gerekir. Bu nedenle, CPU ile GPU arasındaki bant genişliği ve GPU'daki dokular için kullanılabilen bellek açısından başka kısıtlamalar vardır.
Uygulamanızdaki katmanları anlamak için Chrome Geliştirici Araçları'nı kullanma
Uygulamanızdaki katmanları ve bir öğenin neden katmana sahip olduğunu anlamak için Chrome Geliştirici Araçları'nın Zaman Çizelgesi'nde Boya profilleyiciyi etkinleştirmeniz gerekir:
Bu ayarı etkinleştirdikten sonra kayıt almalısınız. Kayıt tamamlandığında, saniyedeki kare sayısı çubukları ile ayrıntılar arasında bulunan kareleri tek tek tıklayabilirsiniz:
Bunu tıkladığınızda ayrıntılarda yeni bir seçenek sunulur: katman sekmesi.
Bu seçenek, ilgili karedeki tüm katmanları kaydırmanıza, taramanıza ve yakınlaştırmanıza olanak tanıyan yeni bir görünüm açar. Ayrıca her katmanın oluşturulma nedenini de gösterir.
Bu görünümü kullanarak sahip olduğunuz katman sayısını takip edebilirsiniz. Kaydırma veya geçişler gibi performans açısından önemli işlemler sırasında (yaklaşık 4-5 ms. bir süre hedeflemelisiniz) birleştirmeye çok zaman harcıyorsanız kaç katmanınız olduğunu, bunların neden oluşturulduğunu görmek ve uygulamanızdaki katman sayılarını yönetmek için buradaki bilgilerden yararlanabilirsiniz.