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

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

Paul Lewis

Birleştirme işlemi, sayfanın boyanan 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 katman sayısı ve animasyonlar için kullandığınız özellikler.

Özet

  • Animasyonlarınızda dönüşüm ve opaklık değişiklikleri yapın.
  • will-change veya translateZ ile hareketli öğeleri 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üzenden hem de boyamadan kaçınır ve yalnızca birleştirme değişiklikleri gerektirir:

Düzen veya boya olmadan piksel ardışık düzeni.

Bunu yapabilmek için yalnızca oluşturucu tarafından işlenebilecek özellikleri değiştirmeniz gerekir. Şu anda bu geçerli olan yalnızca iki mülk var: transform ve opacity:

Düzeni veya boyamayı tetiklemeden canlandırabileceğiniz özellikler.

transform ve opacity kullanımıyla ilgili dikkat edilmesi gereken nokta, bu özellikleri değiştirdiğiniz öğenin kendi birleştirici katmanında olması gerektiğidir. Katman oluşturmak için öğeyi tanıtmanız gerekir. Bu konuyu bir sonraki adımda ele alacağız.

Canlandırmayı planladığınız öğeleri tanıtın

"Boya karmaşıklığını basitleştirme ve boya alanlarını azaltma" bölümünde belirttiğimiz gibi, canlandırmayı planladığınız öğeleri (gereken durumlarda, aşırıya kaçmayın!) kendi katmanlarına tanıtmanız gerekir:

.moving-element {
  will-change: transform;
}

Veya eski tarayıcılar için ya da desteklemeyen tarayıcılar değişir:

.moving-element {
  transform: translateZ(0);
}

Katmanları yönetin ve katman patlamalarını önleyin

Öyleyse, katmanların performansa yardımcı olduğunu bilmek, 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 söylemenin bir dolaylı yoludur. Buradaki sorun, oluşturduğunuz her katmanın bellek ve yönetim gerektirmesi ve bunun ücretsiz olmamasıdır. Aslında, belleğe sahip cihazlarda performans üzerindeki etkisi, katman oluşturmanın sağladığı avantajdan ç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 da vardır.

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

Chrome Geliştirici Araçları'ndaki boya profil aracı için açma/kapatma düğmesi.

Uygulamanızdaki katmanlar ve bir öğenin neden katman içerdiğini anlamak için Chrome Geliştirici Araçları'nın Zaman Çizelgesi'nde Paint profil aracını etkinleştirmeniz gerekir:

Bu ayar açık olduğunda kayıt alırsınız. Kayıt sona erdiğinde tek tek kareleri tıklayabilirsiniz. Bu kareler, saniyedeki kare sayısı çubukları ile ayrıntılar arasında bulunur:

Geliştiricinin profil çıkarmayla ilgilendiği bir çerçeve.

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

Chrome Geliştirici Araçları'ndaki katman sekmesi düğmesi.

Bu seçenek, o kare süresince tüm katmanları kaydırmanıza, taramanıza ve yakınlaştırmanıza olanak sağlayan ve her bir katmanın oluşturulma nedenlerini içeren yeni bir görünüm açar.

Chrome Geliştirici Araçları'ndaki katman görünümü.

Bu görünümü kullanarak sahip olduğunuz katmanların sayısını izleyebilirsiniz. Kaydırma veya geçişler gibi performans açısından kritik işlemler sırasında toplama için çok fazla zaman harcıyorsanız (yaklaşık 4-5 ms hedeflemelisiniz) 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.