wake-up-neo.net

Warum verringert das Aktivieren der Hardwarebeschleunigung in CSS3 die Leistung?

Ich bewege 6000 kleine Div-Elemente in einem CSS3-Experiment mit einem Übergang von top: 0 Zu top: 145px, Um die Leistung zu testen.

Die Verwendung von no Hardwarebeschleunigung läuft in Google Chrome reibungslos.

Wenn ich die Hardwarebeschleunigung über translateZ(0) aktiviere, wird die Leistung fürchterlich.

Warum ist das so?

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


Update (2014-11-13): Da diese Frage immer noch Aufmerksamkeit erregt würde ich Ich möchte darauf hinweisen, dass das Problem selbst immer noch zu bestehen scheint, obwohl das erwähnte Ruckeln in der mitgelieferten Demo auf moderner Hardware möglicherweise nicht mehr sichtbar ist. Bei älteren Geräten können Leistungsprobleme auftreten.

81
Timo

Ich füge immer hinzu:

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

Bei der Arbeit mit 3d transformieren. Sogar "gefälschte" 3D-Transformationen. Erfahrungsgemäß verbessern diese beiden Linien immer die Leistung, insbesondere auf dem iPad, aber auch in Chrome.

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

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

Bearbeitung per 19. August 201:

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

backface-visibility: hidden;
perspective: 1000;
98
mddw

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 auch die Erklärung in ihr Kommentar richtig bemerkt:

Das Verschieben weniger großer Objekte ist bei Verwendung der 3D-Beschleunigung performanter als das Verschieben vieler kleiner Objekte, da alle 3D-beschleunigten Ebenen auf die GPU und zurück ü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.

7
Dan Dascalescu

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

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

GPU Accelerated Drawing GPU Accelerated Drawing von Seiteninhalten aktivieren, wenn Compositing aktiviert ist.

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

Aktiviere diese, versuche es und versage kläglich mit aktiviertem Kontrollkästchen (genau wie du). Aber dann habe ich noch eine andere Option bemerkt:

FPS counter Zeigt die tatsächliche Bildrate einer Seite in Bildern pro Sekunde an , wenn die Hardwarebeschleunigung aktiviert ist .

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

TL; DR: Hardwarebeschleunigung ist am Ende eine Benutzerpräferenz; Das Erzwingen mit dem Dummy translateZ(0) führt zu einem redundanten Verarbeitungsaufwand, der den Anschein einer geringeren Leistung erweckt.

6
o.v.

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

"Wenn Thread-Compositing aktiviert ist, werden beschleunigte CSS-Animationen auf dem Compositing-Thread ausgeführt. Bei beschleunigten CSS-Animationen kann es jedoch zu Leistungsverbesserungen kommen, auch ohne den Compositor-Thread."

0
Lion

Ich habe die Erfahrung gemacht, dass GPUs in der Regel nicht für alle Arten von Grafiken schneller sind. Für sehr "einfache" Grafiken können sie langsamer sein.

Möglicherweise haben Sie ein anderes Ergebnis erzielt, wenn Sie ein Bild gedreht haben - genau das können GPUs

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

0
sabof