Birleştirme işlemi, sayfanın boyanan kısımlarının ekranda görüntülenmek üzere bir araya getirildiği yerdir.
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
veyatranslateZ
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:
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
:
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
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:
Bunu tıkladığınızda ayrıntılarda yeni bir seçenek sunulur: katman sekmesi.
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.
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.