Dlaczego włączenie akceleracji sprzętowej w CSS3 spowalnia wydajność?

Przenoszę 6000 małych elementów div w eksperymencie css3 przy użyciu przejścia od top: 0do top: 145pxdo testowania wydajności.

Korzystanie żadnego sprzętową akcelerację biegnie gładka na Google Chrome.

Jeśli włączę akcelerację sprzętową poprzez translateZ(0)wydajność, stanie się okropna.

Dlaczego to jest takie?

Oto mój przykładowy kod: http://dl.dropboxusercontent.com/u/17844821/tmp/hwtest.html

Aktualizacja (2014-11-13): Ponieważ to pytanie wciąż przyciąga uwagę, chciałbym zwrócić uwagę, że sam problem nadal wydaje się istnieć, chociaż wspomniane jąkanie może nie być już widoczne w dostarczonej wersji demonstracyjnej na nowoczesnym sprzęcie . Starsze urządzenia mogą nadal mieć problemy z wydajnością.

Zawsze dodaję:

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

Podczas pracy z transformacją 3D. Nawet „fałszywe” przekształcenia 3D. Doświadczenie mówi mi, że te dwie linie zawsze poprawiają wydajność, szczególnie na iPadzie, ale także w Chrome.

Przetestowałem na twoim przykładzie i, o ile wiem, działa.

A jeśli chodzi o część twojego pytania "dlaczego" ... nie wiem. Transformacja 3D to młody standard, więc implementacja jest niestabilna. Dlatego jest to właściwość z przedrostkiem: do testów beta. Ktoś mógłby wypełnić raport o błędzie lub pytanie i zlecić zespołowi zbadanie sprawy.

Edycja z 19 sierpnia 2013 r . :

Ta odpowiedź jest regularnie aktywna i właśnie straciłem godzinę, stwierdzając, że IE10 również tego potrzebuje. Więc nie zapomnij:

backface-visibility: hidden;
perspective: 1000;

Powodem, dla którego animacja była wolniejsza po dodaniu hack ( translateZ(0)) transformacji zerowej, jest to, że każda zerowa transformacja 3D tworzy nową warstwę. Gdy jest zbyt wiele tych warstw, spada wydajność renderowania, ponieważ przeglądarka musi wysyłać dużo tekstur do GPU.

Problem został zauważony w 2013 roku na stronie domowej Apple, która nadużyła hackowania zerowej transformacji. Zobacz http://wesleyhales.com/blog/2013/10/26/Jank-Busting-Apples-Home-Page/

OP również poprawnie zauważył wyjaśnienie w swoim komentarzu :

Przenoszenie kilku dużych obiektów jest bardziej wydajne niż przenoszenie wielu małych elementów podczas korzystania z akceleracji 3D, ponieważ wszystkie warstwy z akceleracją 3D muszą zostać przeniesione do GPU iz powrotem. Więc nawet jeśli GPU wykonuje dobrą robotę, transfer wielu obiektów może być problemem, więc używanie akceleracji GPU może nie być tego warte.

Ciekawy. Próbowałem grać z kilkoma opcjami about:flags, szczególnie tymi:

Komponowanie GPU na wszystkich stronach Stosuje kompozycję przyspieszaną przez GPU na wszystkich stronach, a nie tylko na tych, które zawierają warstwy przyspieszane przez GPU.

Rysowanie przyspieszane przez GPU Włącz przyspieszane przez GPU rysowanie zawartości strony, gdy włączone jest komponowanie.

GPU Accelerated Canvas 2D Zapewnia wyższą wydajność tagów kanwy w kontekście 2D dzięki renderowaniu przy użyciu sprzętu GPU (Graphics Processor Unit).

Włączono je, wypróbowałem i nie udało się żałośnie z włączonym polem wyboru (tak jak ty). Ale potem zauważyłem kolejną opcję:

Licznik klatek na sekundę Pokazuje rzeczywistą liczbę klatek na sekundę strony w klatkach na sekundę, gdy akceleracja sprzętowa jest aktywna .

Biorąc pod uwagę wyróżnienie w opisie flagi, spekuluję, że akceleracja sprzętowa była w rzeczywistości włączona dla mnie nawet bez zaznaczonego pola wyboru, ponieważ widziałem licznik FPS z włączonymi powyższymi opcjami!

TL; DR: akceleracja sprzętowa jest ostatecznie preferencją użytkownika; wymuszenie go za pomocą atrapy translateZ(0)wprowadzi zbędne narzuty przetwarzania, dając wrażenie niższej wydajności.

Sprawdź chrome: // flags w chrome. To mówi

„Gdy włączone jest komponowanie w wątkach, przyspieszone animacje CSS są uruchamiane w wątku kompozycji. Jednak przy przyspieszonych animacjach CSS może wystąpić wzrost wydajności, nawet bez wątku kompozytora”.

Z mojego doświadczenia wynika, że ​​układy GPU nie są generalnie szybsze dla wszystkich rodzajów grafiki. W przypadku bardzo „podstawowych” grafik mogą być wolniejsze.

Możesz uzyskać inny wynik, obracając obraz - w tym są dobre układy GPU

Weź również pod uwagę, że translateZ (0) jest operacją w trzech wymiarach, podczas gdy zmiana góry lub lewej jest operacją dwuwymiarową

Widziałem was dwójkę demo ， Chyba znam powód, dla którego się zdezorientowaliście ：

1. Elementy animacji Nie używaj lewej ani górnej części do zmiany lokalizacji, spróbuj użyć -webkit-transform;
2. Wszystkie elementy potomne muszą mieć włączone przyspieszenie sprzętowe, takie jak translateZ () lub translate3D;
3. FPS mierzy płynność animacji, twój demo FPS średnio tylko 20 FPS.

Powyżej tylko osobista opinia, dziękuję!