Yalnızca Birleştirici Mülklere Bağlı Kal ve Katman Sayısını Yönet

Birleştirme, sayfanın boyanmış kısımlarının ekranda görüntülenmek üzere bir araya getirildiği yerdir.

Paul Lewis

Birleştirme, sayfanın boyanmış kısımlarının bir araya getirilerek büyük bir sıkıntı yaratabilir.

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.
• Hareketli öğeleri will-change veya translateZ ile tanıtın.
• Tanıtım 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 birleştirici tarafından işlenebilecek değişen özellikleri korumanız 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 birleştirici katmanında olması gerektiğidir. Bir katman oluşturmak için ilgili öğeyi tanıtmanız gerekir. Bu konuya biraz sonra değineceğiz.

Not: Animasyonlarınızı yalnızca bu özelliklerle sınırlandıramayacağınız konusunda endişeleriniz varsa FLIP ilkesine göz atın. Bu ilke, animasyonları daha pahalı özelliklerden dönüşüm ve opaklık değişikliklerine göre yeniden eşleştirmenize yardımcı olabilir.

Animasyon eklemek istediğiniz öğeleri tanıtın

"Boya karmaşıklığını basitleştirin ve boya alanlarını azaltın" bölümünde bahsettiğimiz gibi bölümünde, canlandırmayı planladığınız öğeleri (gerekçe çerçevesinde, aşırıya kaçmayın!) kendi katmanlarına yükseltmeniz 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 belirtmenin bir dolambaçlı yoludur. Buradaki sorun, oluşturduğunuz her katmanın hafıza ve yönetim gerektirmesidir. Bu da ücretsiz değildir. Aslında, sınırlı belleğe sahip cihazlarda performans üzerindeki etki, katman oluşturmanın sağladığı herhangi bir avantajdan çok daha ağır basabilir. Her katmanın dokularının GPU'ya yüklenmesi gerekir. Böylece, CPU ile GPU arasında bant genişliği ve GPU'daki dokular için kullanılabilecek bellek açısından başka kısıtlamalar olur.

Uyarı : Öğeleri gereksiz yere tanıtmayın.

Uygulamanızdaki katmanları anlamak için Chrome Geliştirici Araçları'nı kullanın

Uygulamanızdaki katmanları ve bir öğenin neden bir katmanı olduğunu anlamak için Chrome Geliştirici Araçları'nda Boya profil aracını etkinleştirmeniz gerekir Zaman çizelgesi:

Bu mod açıkken kayıt çekmeniz gerekir. Kayıt sona erdiğinde saniyedeki kare sayısı çubukları ile ayrıntılar arasında bulunan tek tek kareleri tıklayabilirsiniz:

Bunu tıkladığınızda ayrıntılarda size yeni bir seçenek sunulur: katman sekmesi.

Bu seçenek, her bir katmanın oluşturulma nedenleriyle birlikte ilgili çerçeve sırasındaki tüm katmanlarda kaydırma, tarama ve yakınlaştırma yapmanıza olanak tanıyan yeni bir görünüm açar.

Bu görünümü kullanarak sahip olduğunuz katman sayısını izleyebilirsiniz. Kaydırma veya geçiş gibi performans açısından önemli işlemler sırasında (yaklaşık 4-5 ms. bir sınır tanımanız gerekir) birleştirmeye çok zaman harcıyorsanız kaç katmanınız olduğunu, neden oluşturulduklarını görmek ve uygulamanızdaki katman sayılarını yönetmek için buradaki bilgilerden yararlanabilirsiniz.