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);
}
performance
css
translate-animation
Ahmed Nuaman
źródło
źródło
-o-transform: translateZ(0)nigdy nie było rzeczą. caniuse.com/#search=translate3dOdpowiedzi:
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.źródło
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.
źródło
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/
źródło
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.źródło
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;źródło