Web

HTML5 in der Praxis

Bessere Performance mit HTML5

11.04.2011
Von Sven Hähle

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.

Hilfsmittel: Hinter dem Cross Browser CSS3 Rule Generator verbirgt sich ein Stylesheet, das die fehlende CSS3-Unterstützung in Browsern wie dem Internet Explorer 8 ausmerzt. Es sorgt dafür, dass viele CSS3-Möglichkeiten auf allen aktuellen Browsern nutzbar sind.
Hilfsmittel: Hinter dem Cross Browser CSS3 Rule Generator verbirgt sich ein Stylesheet, das die fehlende CSS3-Unterstützung in Browsern wie dem Internet Explorer 8 ausmerzt. Es sorgt dafür, dass viele CSS3-Möglichkeiten auf allen aktuellen Browsern nutzbar sind.

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