Translate'e göre CSS performansıZ (0)

Bir dizi blog, transform: translateZ(0)animasyonları ve geçişleri hızlandırmak için GPU'yu bir öğenin 3D olduğunu düşünmek için 'kandırmanın' performans kazancını ifade etti . Bu dönüşümü aşağıdaki şekilde kullanmanın çıkarımları olup olmadığını merak ediyordum:

* {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
}

CSS dönüşümleri , spesifikasyonda açıklandığı gibi yeni bir yığın bağlamı ve içeren blok oluşturur . Düz İngilizce'de bu, onlara bir dönüşüm uygulanmış sabit konumlu öğelerin daha çok mutlak konumlandırılmış öğeler gibi davranacağı ve z-indexdeğerlerin büyük olasılıkla vidalanacağı anlamına gelir.

Bu demoya bir göz atarsanız, ne demek istediğimi göreceksiniz. İkinci div'in kendisine uygulanan bir dönüşümü vardır, yani yeni bir yığın bağlamı oluşturur ve sözde öğeler aşağıdan ziyade üstte yığılır.

Yani temelde bunu yapma. Yalnızca optimizasyona ihtiyacınız olduğunda 3B dönüşümü uygulayın. -webkit-font-smoothing: antialiased;bu sorunları oluşturmadan 3B hızlandırmadan yararlanmanın başka bir yoludur, ancak yalnızca Safari'de çalışır.

Çıkarımlar istiyorsanız, bazı senaryolarda Google Chrome performansı, donanım hızlandırması etkinken korkunçtur . İşin garibi, "numara" yı iyi -webkit-transform: rotateZ(360deg);çalıştı.

Nedenini anladığımıza inanmıyorum.

Tarayıcıyı, piksellerin uçmasını sağlamak için aygıtın grafik işlem birimine (GPU) erişmek için donanım hızlandırmayı kullanmaya zorlar. Öte yandan, web uygulamaları tarayıcı bağlamında çalışır, bu da yazılımın render işleminin çoğunu (hepsini olmasa da) yapmasını sağlar ve bu da geçişler için daha az beygir gücü sağlar. Ancak Web yetişiyor ve çoğu tarayıcı satıcısı artık belirli CSS kuralları aracılığıyla grafiksel donanım hızlandırması sağlıyor.

Kullanımı -webkit-transform: translate3d(0,0,0);, GPU'yu CSS geçişleri için harekete geçirerek daha yumuşak hale getirir (daha yüksek FPS).

Not: translate3d(0,0,0) Gördükleriniz açısından hiçbir şey yapmaz. Nesneyi x, y ve z eksenlerinde 0px hareket ettirir. Yalnızca donanım ivmesini zorlamak için bir tekniktir.

Burada iyi okuyun: http://www.smashingmagazine.com/2012/06/21/play-with-hardware-accelerated-css/

-webkit-transform: translate3d(0, 0, 0);Yeni position: -webkit-sticky;mülkü bozacak gerçeğini doğrulayabilirim . Üzerinde çalıştığım bir sol çekmece gezinme modeliyle, dönüştürme özelliğiyle istediğim donanım ivmesi, üst gezinme çubuğumun sabit konumlandırmasıyla karıştırılıyordu. Dönüşümü kapattım ve konumlandırma iyi çalıştı.

Şans eseri, -webkit-font-smoothing: antialiasedhtml elemanına sahip olduğum için zaten donanım hızlandırmaya sahiptim. Bu davranışı iOS7 ve Android'de test ediyordum.

Mobil cihazlarda her şeyi GPU'ya göndermek, belleğin aşırı yüklenmesine ve uygulamanın çökmesine neden olur. Bununla Cordova'daki bir iPad uygulamasında karşılaştım. En iyisi, yalnızca gerekli öğeleri, özellikle hareket ettiğiniz div'ler olan GPU'ya göndermek.

Daha da iyisi, sol yerine translateX (50px) gibi animasyonları yapmak için 3d geçiş dönüşümlerini kullanın: 50px;