Warum verlangsamt das Aktivieren der Hardwarebeschleunigung in CSS3 die Leistung?

82

Ich bewege 6000 kleine div-Elemente in einem CSS3-Experiment mit einem Übergang von top: 0zu top: 145pxzu Testleistung.

Die Verwendung ohne Hardwarebeschleunigung läuft in Google Chrome reibungslos.

Wenn ich die Hardwarebeschleunigung über die translateZ(0)Leistung aktiviere, wird das schrecklich.

Warum ist das so?

Hier ist mein Beispielcode: http://dl.dropboxusercontent.com/u/17844821/tmp/hwtest.html


Update (13.11.2014): Da diese Frage immer noch Aufmerksamkeit erregt, möchte ich darauf hinweisen, dass das Problem selbst immer noch zu bestehen scheint, obwohl das erwähnte Stottern in der bereitgestellten Demo auf moderner Hardware möglicherweise nicht mehr sichtbar ist . Bei älteren Geräten treten möglicherweise weiterhin Leistungsprobleme auf.

Timo
quelle
9
Die eigentliche Frage ist, warum einige Browser möchten, dass Autoren auf alberne Hacks wie "Null" -Transformationen zurückgreifen, um die Hardwarebeschleunigung zu aktivieren. Firefox verschiebt sich so weit wie möglich auf die GPU, während der IE sich dafür entscheidet, _ALL_ THE THINGS zu BESCHLEUNIGEN! Aber interessante Frage hier trotzdem, da es zu zeigen scheint, dass solche Hacks manchmal sogar nach hinten losgehen können.
BoltClock
2
@ BoltClock'saUnicorn Grundsätzlich stimme ich dir zu. Aber war es bei browserübergreifenden Problemen nicht immer so? :-)
Timo
6
Ich habe diese Frage vor einiger Zeit gestellt, aber jetzt ist mir aufgefallen, dass die Anzahl der verschobenen Elemente einen großen Einfluss auf das Problem zu haben scheint. Das Verschieben weniger großer Objekte ist bei Verwendung der 3D-Beschleunigung leistungsfähiger als das Verschieben vieler kleiner Objekte, da alle 3D-beschleunigten Ebenen auf die GPU und auf dem Rückweg übertragen werden müssen. Selbst wenn die GPU gute Arbeit leistet, kann die Übertragung vieler Objekte ein Problem darstellen, sodass sich die Verwendung der GPU-Beschleunigung möglicherweise nicht lohnt.
Timo
1
Ich sehe in dem Beispiel in keinem Browser einen Leistungsunterschied und habe dafür gestimmt, dass das Schließen nicht mehr reproduzierbar ist.
Jason C
1
@Timo Gerade überprüft, was die neuesten Versionen von Firefox und Chrome sind, und IE11 unter Windows 7 64-Bit, auf einem ziemlich alten 2,3-GHz-i5-Thinkpad mit einem nVidia 4200M, scheinen mir beide Optionen reibungslos zu sein. Achselzucken
Jason C

Antworten:

100

Ich füge immer hinzu:

-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;

Bei der Arbeit mit 3D-Transformation. Sogar "gefälschte" 3D-Transformationen. Die Erfahrung zeigt, dass diese beiden Linien immer die Leistung verbessern, insbesondere auf dem iPad, aber auch auf Chrome.

Ich habe Ihr Beispiel getestet und soweit ich das beurteilen kann, funktioniert es.

Was das "Warum" Ihrer Frage betrifft ... ich weiß es nicht. 3D-Transformationen sind ein junger Standard, daher ist die Implementierung abgehackt. Deshalb ist es eine vorangestellte Eigenschaft: für Betatests. Jemand könnte einen Fehlerbericht oder eine Frage ausfüllen und das Team untersuchen lassen.

Bearbeiten per 19. August 2013 :

Es gibt regelmäßige Aktivitäten zu dieser Antwort, und ich habe gerade eine Stunde verloren, als ich feststellte, dass IE10 dies auch benötigt. Also vergiss nicht:

backface-visibility: hidden;
perspective: 1000;
mddw
quelle
3
Ich habe einen weiteren Test gemacht. Im Grunde das gleiche wie Test Nr. 1, aber dieses Mal habe ich die Boxen auch über -webkit-transform: rotateZ(360deg); dl.dropbox.com/u/17844821/zeug/hwtest2.html um die Z-Achse drehen lassen - Diesmal ist die hardwarebeschleunigte Version schneller! Wenn ich die Drehung entferne, verlangsamt die Hardwarebeschleunigung die Animation. Wenn Ihre Theorie wahr ist, sollte dies nicht funktionieren (denn der einzige Unterschied ist, dass ich hinzugefügt habe rotateZ(360)). Andererseits ist Chrom vielleicht klug genug, um zu erkennen, dass für eine Drehung um die Z-Achse kein Neuzeichnen der Rückseite dieser Kacheln erforderlich ist?
Timo
1
Dies ist in iOS6 nicht mehr der Fall :-(
Michael Mullany
2
@ Timo Nur ein Kopf hoch, w3schools ist nicht mit dem w3c verbunden: w3fools.com
Kyle Robinson Young
7
Sie sollten hinzufügen, wo diese Zeilen hinzugefügt werden sollen, nicht nur ein allgemeines "nur hinzufügen ...". Ich selbst weiß, wo, aber viele würden nicht.
vsync
4
Fügen Sie es dem übergeordneten Element der Elemente hinzu, die Sie animieren.
mddw
7

Der Grund, warum die Animation langsamer war, als Sie den Nulltransformations-Hack ( translateZ(0)) hinzugefügt haben, ist, dass jede Null-3D-Transformation eine neue Ebene erstellt. Wenn zu viele dieser Ebenen vorhanden sind, leidet die Renderleistung, da der Browser viele Texturen an die GPU senden muss.

Das Problem wurde 2013 auf der Apple-Homepage festgestellt, die den Null-Transformations-Hack missbraucht hat. Siehe http://wesleyhales.com/blog/2013/10/26/Jank-Busting-Apples-Home-Page/

Das OP hat die Erklärung in seinem Kommentar auch richtig bemerkt :

Das Verschieben weniger großer Objekte ist bei Verwendung der 3D-Beschleunigung leistungsfähiger als das Verschieben vieler kleiner Objekte, da alle 3D-beschleunigten Ebenen auf die GPU und auf dem Rückweg übertragen werden müssen. Selbst wenn die GPU gute Arbeit leistet, kann die Übertragung vieler Objekte ein Problem darstellen, sodass sich die Verwendung der GPU-Beschleunigung möglicherweise nicht lohnt.

Dan Dascalescu
quelle
6

Interessant. Ich habe versucht, mit einigen Optionen zu spielen about:flags, insbesondere mit diesen:

GPU-Compositing auf allen Seiten Verwendet GPU-beschleunigtes Compositing auf allen Seiten, nicht nur auf solchen, die GPU-beschleunigte Ebenen enthalten.

GPU-beschleunigtes Zeichnen Aktivieren Sie das GPU-beschleunigte Zeichnen von Seiteninhalten, wenn Compositing aktiviert ist.

GPU Accelerated Canvas 2D Ermöglicht eine höhere Leistung von Canvas-Tags mit einem 2D-Kontext durch Rendern mit GPU-Hardware (Graphics Processor Unit).

Aktivierte diese, versuchte es und scheiterte kläglich mit aktiviertem Kontrollkästchen (genau wie Sie). Aber dann bemerkte ich noch eine andere Option:

FPS-Zähler Zeigt die tatsächliche Bildrate einer Seite in Bildern pro Sekunde an, wenn die Hardwarebeschleunigung aktiv ist .

Angesichts des Highlights in der Flag-Beschreibung würde ich spekulieren, dass die Hardwarebeschleunigung für mich sogar ohne das aktivierte Kontrollkästchen aktiviert war, da ich den FPS-Zähler mit den oben aktivierten Optionen sah!

TL; DR: Hardwarebeschleunigung ist letztendlich eine Benutzerpräferenz; Wenn Sie es mit einem Dummy erzwingen, translateZ(0)entsteht ein redundanter Verarbeitungsaufwand, der den Anschein einer geringeren Leistung erweckt.

ov
quelle
2
Dann schau es dir an. Ich habe einen weiteren Test gemacht. Im Grunde das gleiche wie Test Nr. 1, aber dieses Mal habe ich die Boxen zusätzlich um ihre eigene Achse drehen lassen, indem ich -webkit-transform: rotateZ(360deg); dl.dropbox.com/u/17844821/zeug/hwtest2.html hinzugefügt habe - diesmal ist die hardwarebeschleunigte Version schneller! Wenn ich die Drehung entferne, verlangsamt die Hardwarebeschleunigung die Animation.
Timo
@valmar: aktivierst du den fps zähler? In diesem neuen Beispiel wird es unabhängig davon angezeigt, wie ich das Kontrollkästchen aktiviert habe, was bedeutet, dass die Hardwarebeschleunigung weiterhin erzwungen wird. Ich glaube , Ihre Frage läuft darauf hinaus, „warum ist translateZ(0)langsamer als rotateZ(360deg)
ov
Nicht wirklich. translateZ(0)ist IMMER aktiv. Es ist tatsächlich erforderlich, um eine 3D-Beschleunigung auszulösen. rotateZ(360deg)fügt nur zusätzlich die Rotationsanimation hinzu. Ich würde also sagen, die Frage ist: Warum ist die Animation mit 3D-Hardwarebeschleunigung mit und rotateZ(360deg)ohne flüssiger ?
Timo
1
kann es nicht glauben. Die Drehung schwerer Bilder ist ohne Hardwarebeschleunigung schneller ...
ProblemsOfSumit
0

Überprüfen Sie chrome: // Flags in Chrome. Es sagt

"Wenn Threaded Compositing aktiviert ist, werden beschleunigte CSS-Animationen auf dem Compositing-Thread ausgeführt. Mit beschleunigten CSS-Animationen können jedoch auch ohne den Compositor-Thread Leistungssteigerungen erzielt werden."

Löwe
quelle
Ich kann diese Option auf chrome: // flags hier nicht finden. Wenn Sie diese Funktion deaktivieren, ist die hardwarebeschleunigte Version dann schneller als die nicht beschleunigte für Sie?
Timo
Jetzt ist diese Option in DevTools Einstellungen
Dmitry Pashkevich
0

Meine Erfahrung ist, dass GPUs im Allgemeinen nicht für alle Arten von Grafiken schneller sind. Für sehr "einfache" Grafiken können sie langsamer sein.

Wenn Sie ein Bild gedreht haben, haben Sie möglicherweise ein anderes Ergebnis erzielt - so gut sind GPUs

Beachten Sie auch, dass translateZ (0) eine Operation in drei Dimensionen ist, während das Ändern von oben oder links eine zweidimensionale Operation ist

Sabof
quelle
Höchstwahrscheinlich handelt es sich um ein Implementierungsproblem. GPUs sind viel schneller für alle Grafiken, solange man es richtig umzusetzen;)
scientiaesthete
1
translateZ(0)tut eigentlich nichts anderes als die 3D-Hardwarebeschleunigung zu "aktivieren". Es ist ein Hack, aber es funktioniert. Wenn Sie dieses CSS-Attribut hinzufügen, werden das ausgewählte HTML-Element sowie alle untergeordneten Elemente von der GPU und nicht von der CPU erzwungen.
Timo
Ich kenne nicht alle Implementierungsdetails auf niedriger Ebene. Ich hatte ähnliche Probleme mit der QT - Hardwarebeschleunigung, die die Dinge verlangsamt. Ich weiß nicht, an welchem ​​Punkt (oder ob) der Computer erkennt, dass translateZ (0) ignoriert werden kann und die Transformation als Bewegung in zwei Dimensionen verarbeitet werden kann. (Keine Perspektive, kein Anti-Aliasing, kein z + = 0 für jedes Pixel)
Sabof
Wissenschaftlich gesehen ist die GPU nicht schneller für die Berechnung aller Grafiken, da der CPU-Aufwand erforderlich ist, um die Befehle und den Speicher in die GPU und den GPU-Speicher zu verschieben. Es gibt einen Bruchpunkt der Komplexität, an dem sich diese Bemühungen lohnen. YMMV <vorheriger Montage-
Handoptimierer
GPUs sind für den eigentlichen Berechnungsteil viel schneller. Alle derzeit verfügbaren GPUs haben jedoch eine ziemlich schwere Einrichtungsphase, bevor die eigentliche Berechnung beginnen kann. Bei "einfachen" Inhalten kann es schneller sein, die CPU das gesamte Rendern ausführen zu lassen als das GPU-Setup + die GPU-Berechnung. Ein gut implementierter Browser trifft automatisch die richtige Wahl und es gibt keine Möglichkeit, die ein zufälliger Inhaltsautor besser machen kann.
Mikko Rantalainen
-2

Ich habe euch zwei Demo gesehen. Ich glaube, ich kenne den Grund, warum ihr verwirrt habt.

  1. Die Animationselemente Verwenden Sie nicht links oder oben, um den Speicherort zu ändern. Versuchen Sie, die -webkit-Transformation zu verwenden.
  2. Alle untergeordneten Elemente müssen die Hardwarebeschleunigung aktivieren, z. B. translateZ () oder translate3D.
  3. FPS messen die Animationsfluenz, Ihre Demo-FPS durchschnittlich nur 20FPS.

Oben nur eine persönliche Meinung, danke!

一丝 冰凉
quelle
Willkommen bei Stack Overflow! Bitte verwenden Sie in Ihren Posts keine Signaturen / Slogans. Ihre Benutzerbox zählt als Ihre Signatur, und Sie können Ihr Profil verwenden, um Informationen über sich selbst zu veröffentlichen, die Sie mögen. FAQ zu Unterschriften / Slogans
Andrew Barber
3
Ich habe bereits erklärt, warum und es wird auch erwähnt, warum in dem FAQ-Eintrag, auf den ich verlinkt habe. Sie haben bereits eine Unterschrift - schauen Sie nach rechts, wo Ihr Name und Ihr Avatar-Bild angezeigt werden.
Andrew Barber
"Stapelüberlauf"
23. Januar
1
Bitte schön. Bitte beachten Sie auch, dass dies eine Website nur auf Englisch ist. :) Dein Name ist in Ordnung, aber deine Beiträge sollten bitte auf Englisch verfasst sein.
Andrew Barber
3
苦 逼 了, ich spreche kein Englisch, bitte vergib mir.
23 冰凉