Przenoszę 6000 małych elementów div w eksperymencie css3 przy użyciu przejścia od top: 0
do top: 145px
do 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ą.
Odpowiedzi:
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;
źródło
-webkit-transform: rotateZ(360deg);
pudełkom również obracać się wokół osi z za pośrednictwem dl.dropbox.com/u/17844821/zeug/hwtest2.html - tym razem wersja z akceleracją sprzętową jest szybsza! Jeśli usunę rotację, przyspieszenie sprzętowe spowolni animację. Jeśli twoja teoria jest prawdziwa, to nie powinno działać (bo jedyną różnicą jest to, że dodałemrotateZ(360)
). Z drugiej strony, może chrom jest wystarczająco inteligentny, aby zdać sobie sprawę, że do obracania się wokół osi Z nie jest wymagane przerysowywanie tylnej strony tych płytek?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 :
źródło
Ciekawy. Próbowałem grać z kilkoma opcjami
about:flags
, szczególnie tymi: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ę:
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.źródło
-webkit-transform: rotateZ(360deg);
pudełkom obracać się wokół własnej osi, dodając dl.dropbox.com/u/17844821/zeug/hwtest2.html - Tym razem wersja z akceleracją sprzętową jest szybsza! Jeśli usunę obrót, przyspieszenie sprzętowe spowalnia animację.translateZ(0)
wolniejszy niżrotateZ(360deg)
”translateZ(0)
jest ZAWSZE aktywny. W rzeczywistości jest wymagane, aby wyzwolić przyspieszenie 3D.rotateZ(360deg)
tylko dodatkowo dodaje animację rotacji. Więc powiedziałbym, że pytanie brzmi: dlaczego animacja z akceleracją sprzętową 3D jest płynniejszarotateZ(360deg)
niż bez?Sprawdź chrome: // flags w chrome. To mówi
źródło
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ą
źródło
translateZ(0)
właściwie nie robi nic poza „aktywacją” akceleracji sprzętowej 3D. To hack, ale działa. Podczas dodawania tego atrybutu css, wybrany element html, a także wszystkie elementy podrzędne, zostaną obliczone wymuszenie przez GPU, a nie przez procesor.Widziałem was dwójkę demo , Chyba znam powód, dla którego się zdezorientowaliście :
Powyżej tylko osobista opinia, dziękuję!
źródło