CSS3'te donanım hızlandırmayı etkinleştirmek neden performansı yavaşlatıyor?

Ben bir geçişi kullanarak bir css3 deneyde 6000 küçük div öğelerini taşınacağım top: 0için top: 145pxtest performansı.

Kullanılması hiçbir donanım hızlandırma Google Chrome'da düzgün çalışır.

translateZ(0)Performans yoluyla donanım hızlandırmayı etkinleştirirsem korkunç olur.

Neden böyle?

İşte örnek kodum: http://dl.dropboxusercontent.com/u/17844821/tmp/hwtest.html

Güncelleme (2014-11-13): Bu soru hala dikkatleri üzerine çektiğinden, söz konusu kekemelik modern donanımla ilgili sunulan demoda artık görünmese de sorunun kendisinin hala var gibi göründüğünü belirtmek isterim . Daha eski cihazlar hala performans sorunları görebilir.

Ben her zaman eklerim:

-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;

3 boyutlu dönüştürme ile çalışırken. Hatta "sahte" 3D dönüşümler bile. Deneyimler bana, bu iki satırın özellikle iPad'de ve aynı zamanda Chrome'da performansı her zaman iyileştirdiğini söylüyor.

Örneğiniz üzerinde test yaptım ve anlayabildiğim kadarıyla işe yarıyor.

Sorunuzun "neden" kısmına gelince ... Bilmiyorum. 3B dönüştürme yeni bir standarttır, bu nedenle uygulama dalgalı. Bu nedenle, önekli bir özelliktir: beta testi için. Birisi bir hata raporu veya soru doldurabilir ve ekibin araştırmasını sağlayabilir.

19 Ağustos 2013'e göre düzenleme :

Bu cevapta düzenli bir faaliyet var ve IE10'un da buna ihtiyacı olduğunu bulmak için bir saat kaybettim. Bu yüzden unutma:

backface-visibility: hidden;
perspective: 1000;

Boş dönüşüm hack ( translateZ(0)) eklediğinizde animasyonun daha yavaş olmasının nedeni , her boş 3B dönüşümün yeni bir katman oluşturmasıdır. Bu katmanlardan çok fazla olduğunda, tarayıcının GPU'ya çok sayıda doku göndermesi gerektiğinden işleme performansı düşer.

Sorun, boş dönüşüm hackini kötüye kullanan Apple'ın ana sayfasında 2013 yılında fark edildi. Bkz. Http://wesleyhales.com/blog/2013/10/26/Jank-Busting-Apples-Home-Page/

OP ayrıca yorumundaki açıklamayı doğru bir şekilde fark etti :

Birkaç büyük nesneyi taşımak, 3B hızlandırma kullanılırken çok sayıda küçük öğeyi taşımaktan daha performanslıdır çünkü tüm 3B hızlandırmalı katmanların GPU'ya ve geri dönüş yoluna aktarılması gerekir. Dolayısıyla, GPU iyi bir iş çıkarsa bile, birçok nesnenin aktarımı bir sorun olabilir, bu nedenle GPU hızlandırmayı kullanmaya değmeyebilir.

İlginç. Birkaç seçenekle oynamayı denedim about:flags, özellikle aşağıdakiler:

Tüm sayfalarda GPU birleştirme Yalnızca GPU hızlandırmalı katmanları içerenlerde değil, tüm sayfalarda GPU hızlandırmalı birleştirme kullanır.

GPU Hızlandırılmış Çizim Birleştirme etkinleştirildiğinde sayfa içeriğinin GPU hızlandırmalı çizimini etkinleştirin.

GPU Hızlandırılmış Kanvas 2D , Grafik İşlemci Birimi (GPU) donanımı kullanarak oluşturarak 2D bağlamla daha yüksek performans gösteren tuval etiketleri sağlar.

Bunları etkinleştirdi, denedi ve onay kutusu etkinken berbat bir şekilde başarısız oldu (tıpkı sizin yaptığınız gibi) Ama sonra başka bir seçenek daha fark ettim:

FPS sayacı Donanım hızlandırma etkinken sayfanın gerçek kare hızını saniye başına kare cinsinden gösterir .

Bayrak açıklamasındaki vurgu göz önüne alındığında, yukarıdaki seçenekler açıkken FPS sayacını gördüğümden, donanım hızlandırmanın aslında işaretli onay kutusu olmadan bile benim için açık olduğunu tahmin ediyorum!

TL; DR: donanım hızlandırma, sonuçta bir kullanıcı tercihidir; kukla ile zorlamak translateZ(0), daha düşük performans görünümü vererek fazladan işlem yükü getirecektir.

Chrome'daki chrome: // flags'ı kontrol edin. Diyor ki

"Dizi halinde birleştirme etkinleştirildiğinde, hızlandırılmış CSS animasyonları birleştirme dizisinde çalışır. Ancak, birleştirici dizisi olmadan bile hızlandırılmış CSS animasyonlarıyla çalışan performans kazanımları olabilir."

Deneyimim, GPU'ların genellikle tüm grafik türleri için daha hızlı olmadığıdır. Çok "temel" grafikler için daha yavaş olabilirler.

Bir görüntüyü döndürüyorsanız farklı bir sonuç almış olabilirsiniz - bu, GPU'ların iyi olduğu bir şeydir

Ayrıca translateZ (0) 'ın 3 boyutlu bir işlem olduğunu, üst veya solun değiştirilmesinin 2 boyutlu bir işlem olduğunu düşünün.

İkinizin demosunu gördüm ， Kafanızın karışmasının sebebini biliyorum galiba ：

1. Animasyon öğeleri Konumu değiştirmek için sol veya üst kullanmayın, -webkit-dönüşümünü kullanmayı deneyin;
2. TranslateZ () veya translate3D kullanımı gibi tüm alt öğelerin donanım hızlandırmayı açması gerekir;
3. FPS animasyon akıcılığını ölçer, demo FPS'niz ortalama olarak yalnızca 20FPS'dir.

Yukarıda sadece kişisel bir görüş, teşekkür ederim!