GPU Beschleunigung von animierten und unscharfen Inhalten
Frage : Warum registriert meine CPU ~ 30% , wenn die Weichzeichnung angewendet wird, im Vergleich zu ~ 6% , wenn keine Weichzeichnung auf eine Animation angewendet wird Objekt?
Details:
Ich habe eine Reihe von zufällig generierten Elementen auf einer Seite, denen eine CSS-Animation zugewiesen wurde (in einer CSS-Datei) und zufällig generierte Werte für Breite, Höhe und, wichtig, Unschärfe, inline angewendet.
CSS-Dateistile sehen wie folgt aus:
%Vor% Breite, Höhe und Unschärfe werden inline über style attribute angewendet.
Bei aktivierter Unschärfe beträgt meine CPU-Auslastung ~ 30%. Wenn ich die Unschärfe deaktiviere, sinkt die CPU-Auslastung auf ~ 6%.
Was passiert hier? Kann Chrome GPU nur beschleunigen, wenn keine Unschärfe auftritt? Wenn ja, warum?
Update 1:
Die Animation rise sieht folgendermaßen aus:
2 Antworten
Ich glaube nicht, dass die Unschärfe tatsächlich Ihre Probleme verursacht, es scheint es nur auffälliger als zuvor zu machen. Das Problem ist, dass transform: translateY in Ihrer Animation das transform: translateZ(0) überschreibt, das Sie verwenden, um die GPU-Beschleunigung zu erzwingen.
Dies ist eine Timeline-Aufzeichnung für den Code, den Sie gerade ausführen. Beachten Sie, wie all diese Aktivitäten auf den Haupt- und Raster-Threads liegen:
Vergleichen Sie das nun mit einer Aufnahme, bei der ich will-change: transform auf .foo angewendet habe:
Keine Aktivität im Haupt- und Rasterbereich.
Es gibt zwei Schritte zum Anwenden dieses Fixes:
-
Wenden Sie
will-change: transformauf.fooan. Dadurch weiß der Browser, dass Sie beabsichtigen, diese Eigenschaft zu ändern und dieses Element auf der GPU rendern zu lassen, um dies zu berücksichtigen. -
Derzeit unterstützen keine Versionen von Edge und IE
will-change. Daher verwenden wir in der Animationtransform: translate3d(0, -1000px, 0);, um die GPU-Beschleunigung zu erzwingen. Beachten Sie, dass dies ein Hack ist. Daher werden wir Unterstützung fürwill-changeerkennen undtransform: translateYin Browsern verwenden, die dies unterstützen.
Endgültiger Code:
%Vor%Siehe hier für eine funktionierende Version: Ссылка
Verwischen Sie es nicht in Inline-Stilen. Setzen Sie Ihre Unschärfe in die Style-Datei.