Dlaczego włączenie akceleracji sprzętowej w CSS3 spowalnia wydajność?
Przenoszę 6000 małych elementów div w eksperymencie css3, wykorzystując przejście z top: 0 do top: 145px w celu przetestowania wydajności.
Używanie nie akceleracja sprzętowa działa płynnie w Google Chrome.
Jeśli włączę akcelerację sprzętową przez translateZ(0) wydajność staje się okropna.
Oto mój przykładowy kod: http://dl.dropboxusercontent.com/u/17844821/tmp/hwtest.html
Aktualizacja (2014-11-13): Od 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 dostarczonym demo na nowoczesnym sprzęcie . Starsze urządzenia nadal mogą mieć problemy z wydajnością.
6 answers
Zawsze dodaję:
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
Podczas pracy z transformacją 3d. Nawet" fałszywe " transformacje 3D. Doświadczenie mówi mi, że te dwie linie zawsze poprawiają wydajność, zwłaszcza na iPadzie, ale także na Chrome.
Zrobiłem test na Twoim exemple i, o ile mogę powiedzieć, to działa. Co do "dlaczego" w twoim pytaniu... Nie wiem. Transformacja 3D to młody standard, więc implementacja jest niepewna. Dlatego jest to właściwość prefiksu: do testów beta. Ktoś mógłby wypełnić błąd zgłoś się lub zadaj pytanie i poproś zespół o zbadanie./ align = "right" / 19 sierpnia 2001 2013:
Jest regularna aktywność na tej odpowiedzi, i właśnie straciłem godzinę stwierdzając, że IE10 również tego potrzebuje. Więc nie zapomnij :
backface-visibility: hidden;
perspective: 1000;
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-11-13 09:34:17
Powód, dla którego animacja była wolniejsza po dodaniu null transform hack (translateZ(0)) jest to, że każda zerowa transformacja 3D tworzy nową warstwę. Gdy tych warstw jest zbyt wiele, wydajność renderowania spada, ponieważ przeglądarka musi wysyłać wiele tekstur do procesora GPU.
Problem został zauważony w 2013 roku na stronie głównej Apple, który nadużywał null transform hack. Zobacz http://wesleyhales.com/blog/2013/10/26/Jank-Busting-Apples-Home-Page/
OP również poprawnie zauważyłem wyjaśnienie w ich komentarz :
Przenoszenie kilku dużych obiektów jest bardziej wydajne niż przenoszenie wielu małych przedmiotów przy użyciu akceleracji 3D, ponieważ wszystkie warstwy z akceleracją 3D muszą zostać przeniesione do GPU i powrotem. Więc nawet jeśli GPU robi dobrą robotę, przeniesienie wielu obiektów może być problemem, więc używanie akceleracji GPU może nie być tego warte.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 11:47:01
Ciekawe. Próbowałem grać z kilkoma opcjami w about:flags, szczególnie tymi:
GPU compositing na wszystkich stronach używa GPU-accelerated compositing na wszystkich strony, a nie tylko te, które zawierają warstwy akcelerowane przez GPU.
GPU accelerated Drawing Enable GPU accelerated drawing of page zawartość po włączeniu komponowania.
GPU accelerated Canvas 2D umożliwia wyższą wydajność tagów canvas z kontekstem 2D przez renderowanie za pomocą procesora graficznego (GPU) sprzęt.
Włączył te, spróbował i nie powiódł się z włączonym tickbox (tak jak ty). Ale wtedy zauważyłem jeszcze jedną opcję:
Licznik FPS pokazuje rzeczywistą liczbę klatek na sekundę na stronie, gdy akceleracja sprzętowa jest aktywna.
Biorąc pod uwagę podkreślenie w opisie flagi, spekulowałbym, że akceleracja sprzętowa była dla mnie włączona nawet bez zaznaczone pole wyboru, ponieważ zobaczyłem licznik FPS z opcjami powyżej włączonymi!
TL; DR: akceleracja sprzętowa jest w końcu preferowana przez użytkownika; wymuszenie jej atrapą translateZ(0) wprowadzi nadmiarowość przetwarzania, dając wrażenie niższej wydajności.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-04-11 22:41:02
Sprawdź chrome: / / flagi w chrome. Pisze
" gdy włączone jest tworzenie kompozycji w wątku, akcelerowane animacje CSS są uruchamiane w wątku komponowania. Jednak może dojść do zwiększenia wydajności z przyspieszonymi animacjami CSS, nawet bez wątku compositor."
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-04-09 01:51:17
Moje doświadczenie jest to, że GPU nie są ogólnie szybsze dla wszystkich rodzajów grafiki. Dla bardzo" podstawowej " Grafiki mogą być wolniejsze.
Mógłbyś uzyskać inny wynik, gdybyś obracał obraz - w tym są dobre GPU
Weź również pod uwagę, że translateZ (0) jest operacją w 3 wymiarach, podczas gdy zmiana z góry lub z lewej strony jest operacją 2 wymiarową
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-04-15 23:26:56
I saw you two demo， I think I know the reason you confused：
- elementy animacji nie używają lewej lub górnej strony, aby zmienić lokalizację, spróbuj użyć-webkit-transform;
- wszystkie elementy potomne muszą włączyć akcelerację sprzętową, np. użyj translateZ () lub translate3D;
- fps mierz płynność animacji, Twoje demo FPS średnio tylko 20fps.
Powyżej tylko osobista opinia, dziękuję!
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-01-23 04:09:41