Warum verlangsamt das Aktivieren der Hardwarebeschleunigung in CSS3 die Leistung?

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.

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;

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.

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.

Ü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."

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

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!