Kompozitleme, sayfanın boyanmış bölümlerinin ekranda gösterilmek üzere bir araya getirildiği işlemdir.
Birleştirme, sayfanın boyanmış bölümlerinin ekranda gösterilmek üzere bir araya getirildiği işlemdir.
Bu alanda sayfa performansını etkileyen iki önemli faktör vardır: yönetilmesi gereken kompozisyon 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şikliklerini kullanın.
will-changeveyatranslateZile hareketli öğ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üzeni hem de boyamayı önler ve yalnızca kompozisyon değişiklikleri gerektirir:
Bunu başarmak için yalnızca derleyici tarafından yönetilebilecek özellikleri değiştirmeniz gerekir. Şu anda bu durum yalnızca transform ve opacity mülkleri için geçerlidir:
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;
}
Eski tarayıcılar veya will-change özelliğini desteklemeyen tarayıcılar için:
.moving-element {
transform: translateZ(0);
}
Katmanları yönetme ve katman patlamalarından kaçınma
Katmanların genellikle performansa yardımcı olduğunu bildiğinizden, sayfanızdaki tüm öğeleri aşağıdaki gibi bir öğeyle 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, sınırlı belleğe sahip 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ılar bölümünde yeni bir seçenek gösterilir: 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 kritik işlemler sırasında çok fazla zaman harcıyorsanız (4-5 ms civarında bir süreyi hedeflemeniz gerekir) kaç katmanınız olduğunu ve bunların neden oluşturulduğunu görmek için buradaki bilgileri kullanabilir ve buradan uygulamanızdaki katman sayılarını yönetebilirsiniz.