Wydajność CSS w stosunku do translateZ (0)

Question 1

Wiele blogów mówiło o tym, jak transform: translateZ(0)zwiększyć wydajność w „oszukiwaniu” GPU, aby sądzić, że dany element jest trójwymiarowy, poprzez przyspieszenie animacji i przejść. Zastanawiałem się, czy istnieją konsekwencje użycia tej transformacji w następujący sposób:

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

Question 2

Transformacje CSS tworzą nowy kontekst układania i zawierający blok, zgodnie z opisem w specyfikacji. Mówiąc prostym językiem, oznacza to, że elementy o ustalonej pozycji z zastosowaną transformacją będą działały bardziej jak elementy pozycjonowane absolutnie, a z-indexwartości prawdopodobnie zostaną wkręcone.

Jeśli spojrzysz na to demo , zobaczysz, co mam na myśli. Drugi element div ma zastosowaną transformację, co oznacza, że tworzy nowy kontekst stosu, a pseudoelementy są ułożone na górze, a nie poniżej.

Więc zasadniczo nie rób tego. Zastosuj transformację 3D tylko wtedy, gdy potrzebujesz optymalizacji. -webkit-font-smoothing: antialiased;to kolejny sposób na wykorzystanie akceleracji 3D bez tworzenia tych problemów, ale działa tylko w Safari.

Question 3

Jeśli chcesz implikacji, w niektórych scenariuszach wydajność Google Chrome jest okropna z włączoną akceleracją sprzętową . Co dziwne, zmiana tej „sztuczki” na -webkit-transform: rotateZ(360deg);działała dobrze.

Nie sądzę, żebyśmy kiedykolwiek odkryli dlaczego.

Question 4

Zmusza przeglądarkę do używania akceleracji sprzętowej w celu uzyskania dostępu do procesora graficznego (GPU) urządzenia, aby piksele latały. Z drugiej strony aplikacje internetowe działają w kontekście przeglądarki, co pozwala oprogramowaniu wykonać większość (jeśli nie całość) renderowania, co skutkuje mniejszą mocą na przejścia. Jednak internet nadrabia zaległości i większość producentów przeglądarek zapewnia teraz graficzne przyspieszanie sprzętowe za pomocą określonych reguł CSS.

Użycie -webkit-transform: translate3d(0,0,0);spowoduje, że GPU zacznie działać przy przejściach CSS, czyniąc je płynniejszymi (wyższy FPS).

Uwaga: translate3d(0,0,0) nic nie robi pod względem tego, co widzisz. Przesuwa obiekt o 0px na osi x, y i z. To tylko technika wymuszenia przyspieszenia sprzętowego.

Dobrze przeczytać tutaj: http://www.smashingmagazine.com/2012/06/21/play-with-hardware-accelerated-css/

Question 5

Mogę zaświadczyć o tym, że -webkit-transform: translate3d(0, 0, 0);będzie bałagan z nową position: -webkit-sticky;nieruchomością. W przypadku wzorca nawigacji lewej szuflady, nad którym pracowałem, przyspieszenie sprzętowe, które chciałem z właściwością transformacji, powodowało problemy ze stałym położeniem mojego górnego paska nawigacyjnego. Wyłączyłem transformację i pozycjonowanie działało dobrze.

Na szczęście wydaje mi się, że akceleracja sprzętowa była już włączona, ponieważ miałem -webkit-font-smoothing: antialiasedwłączony element html. Testowałem to zachowanie w iOS7 i Androidzie.

Question 6

Na urządzeniach mobilnych wysłanie wszystkiego do GPU spowoduje przeciążenie pamięci i awarię aplikacji. Spotkałem to w aplikacji na iPada w Cordovie. Najlepiej wysyłać tylko wymagane elementy do GPU, czyli elementów div, po których poruszasz się.

Jeszcze lepiej, użyj transformacji ~~przejść~~ 3D, aby wykonać animacje, takie jak translateX (50px), w przeciwieństwie do lewej: 50px;