Ich bewege 6000 kleine div-Elemente in einem CSS3-Experiment mit einem Übergang von top: 0
zu top: 145px
zu 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.
Antworten:
Ich füge immer hinzu:
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:
quelle
-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 haberotateZ(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?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 :
quelle
Interessant. Ich habe versucht, mit einigen Optionen zu spielen
about:flags
, insbesondere mit diesen:Aktivierte diese, versuchte es und scheiterte kläglich mit aktiviertem Kontrollkästchen (genau wie Sie). Aber dann bemerkte ich noch eine andere Option:
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.quelle
-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.translateZ(0)
langsamer alsrotateZ(360deg)
“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 undrotateZ(360deg)
ohne flüssiger ?Überprüfen Sie chrome: // Flags in Chrome. Es sagt
quelle
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
quelle
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.Ich habe euch zwei Demo gesehen. Ich glaube, ich kenne den Grund, warum ihr verwirrt habt.
Oben nur eine persönliche Meinung, danke!
quelle