CSS-Leistung relativ zu translateZ (0)

96

Eine Reihe von Blogs hat den Leistungsgewinn ausgedrückt, indem die GPU dazu gebracht wurde, zu glauben, dass ein Element 3D ist, indem transform: translateZ(0)Animationen und Übergänge beschleunigt wurden. Ich habe mich gefragt, ob die Verwendung dieser Transformation folgende Auswirkungen hat:

* {
    -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
quelle

6

Kannst du auf diese Blog-Artikel verlinken?

— Jürgen Paul

@PineappleUndertheSea this this: blog.teamtreehouse.com/… hat mich hierher geschickt.

Übrigens war -o-transform: translateZ(0)noch nie etwas. caniuse.com/#search=translate3d

— Volker E.

@ Ahmed Nuaman ja es ist nicht nur ein Trick. Aber es wird offiziell in einigen Apps verwendet. Aber wenn Sie auf einem Gerät (Low-End) ohne GPU landen ... Ich bin mir nicht sicher, wie es funktioniert. Aber da, wenn das, was ein Prozessor kann (2D-Grafik), an die GPU delegiert wird, nur aus dem Grund, dass es einen 3D-Befehl gibt, obwohl er keine endgültigen Auswirkungen hat. Und 3D verwendet mehrere Kerne und arbeitet schneller. Das macht hier Sinn. Benötigt weitere Untersuchungen ...

— TooGeeky

102

CSS-Transformationen erstellen einen neuen Stapelkontext und enthalten einen Block, wie in der Spezifikation beschrieben. Im Klartext bedeutet dies, dass Elemente mit fester Position, auf die eine Transformation angewendet wird, eher wie absolut positionierte Elemente wirken und z-indexWerte wahrscheinlich verschraubt werden.

Wenn Sie sich diese Demo ansehen , werden Sie sehen, was ich meine. Auf das zweite Div wird eine Transformation angewendet, was bedeutet, dass ein neuer Stapelkontext erstellt wird und die Pseudoelemente oben und nicht unten gestapelt werden.

Also mach das im Grunde nicht. Wenden Sie eine 3D-Transformation nur an, wenn Sie die Optimierung benötigen. -webkit-font-smoothing: antialiased;ist eine weitere Möglichkeit, die 3D-Beschleunigung zu nutzen, ohne diese Probleme zu verursachen. Sie funktioniert jedoch nur in Safari.

— Dan Eden
quelle

27

Wenn Sie Auswirkungen haben möchten, ist die Leistung von Google Chrome in einigen Szenarien bei aktivierter Hardwarebeschleunigung schrecklich . Seltsamerweise hat es gut -webkit-transform: rotateZ(360deg);funktioniert , den "Trick" so zu ändern, dass er gut funktioniert.

Ich glaube nicht, dass wir jemals herausgefunden haben, warum.

— ov
quelle

3

Ich hatte Probleme wie zusammengedrückte Bilder und schrecklich falsche Animationen mit maximaler Höhe in Safari 5 und 6. Als ich die GPU-Beschleunigung (translateZ (0)) deaktivierte, funktionierte alles wie beabsichtigt, aber die Animation war nicht flüssig genug. Ich habe translateZ (0) in rotateZ (360deg) geändert, und plötzlich waren die Animationen flüssig und die Hardware beschleunigt, und es gab keine Probleme mehr.

— jakub_jo

14

Es zwingt den Browser, die Hardwarebeschleunigung zu verwenden, um auf die grafische Verarbeitungseinheit (GPU) des Geräts zuzugreifen und Pixel zum Fliegen zu bringen. Webanwendungen hingegen werden im Kontext des Browsers ausgeführt, sodass die Software den größten Teil (wenn nicht den gesamten) Rendering-Vorgang ausführt, was zu weniger Leistung bei Übergängen führt. Das Web hat jedoch aufgeholt, und die meisten Browser-Anbieter bieten jetzt eine grafische Hardwarebeschleunigung mithilfe bestimmter CSS-Regeln.

Durch -webkit-transform: translate3d(0,0,0);die Verwendung wird die GPU für die CSS-Übergänge aktiviert, wodurch sie flüssiger werden (höhere FPS).

Hinweis: translate3d(0,0,0) Tut nichts in Bezug auf das, was Sie sehen. Es bewegt das Objekt um 0 Pixel in der x-, y- und z-Achse. Es ist nur eine Technik, um die Hardwarebeschleunigung zu erzwingen.

Lesen Sie hier gut: http://www.smashingmagazine.com/2012/06/21/play-with-hardware-accelerated-css/

— Neo
quelle

7

Ich kann bestätigen, dass sich -webkit-transform: translate3d(0, 0, 0);das mit der neuen position: -webkit-sticky;Immobilie herumschlagen wird . Mit einem Navigationsmuster für die linke Schublade, an dem ich gearbeitet habe, hat die Hardwarebeschleunigung, die ich mit der Transformationseigenschaft wollte, die feste Positionierung meiner oberen Navigationsleiste beeinträchtigt. Ich habe die Transformation ausgeschaltet und die Positionierung hat gut funktioniert.

Zum Glück hatte ich anscheinend schon Hardwarebeschleunigung, weil ich -webkit-font-smoothing: antialiaseddas HTML-Element hatte. Ich habe dieses Verhalten in iOS7 und Android getestet.

— J. Hogue
quelle

5

Wenn Sie auf Mobilgeräten alles an die GPU senden, wird der Speicher überlastet und die Anwendung stürzt ab. Ich habe dies auf einer iPad-App in Cordova festgestellt. Am besten senden Sie nur die erforderlichen Elemente an die GPU, die Divs, die Sie speziell verschieben.

Besser noch, verwenden Sie die 3D- ~~Übergangstransformationen~~ , um Animationen wie translateX (50px) zu erstellen, im Gegensatz zu left: 50px;

— Perry
quelle

1

Meinten Sie "Verwenden Sie die 3D-Transformationen" anstelle von "Verwenden Sie die 3D-Übergänge"?

— Isius