Einfacher CSS-Trick: 3D-Fake
Derzeit nutzen die meisten Browser die Hardwarebeschleunigung nur, wenn sie klar erkennen, dass ein HTML-Element davon profitieren würde.
Das deutlichste Zeichen für sie ist, wenn einem Element eine 3D-Transformation zugewiesen wurde. Nun sagen Sie sicher: Ich will ja gar keine 3D-Transformation! Die brauchen Sie auch nicht wirklich - für einen Performance-Gewinn kann es schon genügen, eine vorzutäuschen:
-webkit-transform: translateZ(0);
Der Browser glaubt, das Element solle dreidimensional dargestellt werden, und schickt es zum Rendern an den Grafikprozessor. Diesen Trick sollten Sie allerdings nur sparsam einsetzen.
Gut anzuwenden ist er bei animierten Objekten, die keine anderen bewegten Objekte enthalten. Und wie aus der CSS-Eigenschaft ersichtlich wird, lassen sich davon auch nur Webkit-Browser beeinflussen.
CSS3-Eigenschaft transition
Die CSS3-Eigenschaft transition macht die Umsetzung von animierten Elementen wie sich öffnenden Menüs oder skalierbaren Kästen für jedermann einfach. Was viele nicht wissen: Durch den Einsatz von transition kann auch die Performance gegenüber vielen herkömmlichen Lösungen, die meist auf JavaScript setzen, klar verbessert werden. Die WebKit-Browser Chrome und Safari (MacOS und iOS) nutzen bei transition die Hardwarebeschleunigung, weitere Browser werden damit wahrscheinlich folgen.
Für die Nutzung verschiedener CSS3-Eigenschaften in allen gängigen Browsern gibt es derweil mehrere Lösungen, etwa den Cross Browser CSS3 Rule Generator. Einige bekannte Bibliotheken wie scripty2, YUI transition oder jQuery animate enhanced beinhalten APIs für animierte Seitenelemente, die - wo möglich - transition nutzen, andernfalls eine Standardanimation, basierend auf JavaScript, anbieten.
Hardwarebeschleunigung überwachen
In Google Chrome gibt es ein nützliches Kommandozeilenattribut. Damit zeigt der Browser, wie die Hardwarebeschleunigung genutzt wird: Entsprechende Elemente auf einer Website werden rot umrahmt. Starten Sie Chrome mit dem Attribut:
--show-composited-layer-borders
Auch Safari unter Mac OS lässt sich über das Terminal so starten, dass er alle hardwarebeschleunigte Teile einer Website rot kennzeichnet:
$ CA_COLOR_OPAQUE=1 /Applications/Safari.app/Contents/MacOS/Safari