HTML5 in der Praxis

Workshop: bessere Performance mit HTML5

Hardwarebeschleunigung nutzen

Ein entscheidender Faktor für die Performance von HTML5 ist, dass der Grafikprozessor beim Website-Rendering mitarbeiten kann. Bisher musste die CPU diese Aufgabe allein bewerkstelligen. Jetzt können bestimmte Tasks an die GPU (Graphics Processing Unit) ausgelagert werden, nämlich:

  • das generelle Layout-Rendering (größtenteils)

  • die Verwendung der CSS3-Eigenschaft transition

  • die Verwendung der 3D-Transformationen in CSS3

  • das Grafik-Rendering mittels canvas-Element

  • das Grafik-Rendering mittels WebGL

Während die beiden letztgenannten Punkte eher spezielle Webapplikationen betreffen, können die ersten drei helfen, so gut wie jede Anwendung zu beschleunigen.

Beschleunigung: Die CSS3-Eigenschaft transition ermöglicht die Umsetzung von Seitenelementen, die zuvor nur mittels JavaScript realisiert werden konnten. Dabei sorgt sie ganz nebenbei für einen Geschwindigkeitszuwachs.
Beschleunigung: Die CSS3-Eigenschaft transition ermöglicht die Umsetzung von Seitenelementen, die zuvor nur mittels JavaScript realisiert werden konnten. Dabei sorgt sie ganz nebenbei für einen Geschwindigkeitszuwachs.
Foto: Demo von http://webstandard.kulando.de

Voraussetzung für die Übergabe bestimmter Aufgaben an den Grafikprozessor ist deren richtige Definition. Im Prinzip sollten HTML5-Dokumente so gegliedert werden, dass einzelne Beschleunigungsprozesse durch die GPU nicht von anderen behindert werden. Dazu müssen die Dokumente in einzelne Elemente strukturiert werden, die der Browser wie gewohnt rendern kann.

Der Grafikprozessor wird beim Zusammensetzen mehrerer Elemente zur fertigen Website automatisch genutzt, wobei er die "Effekte" berechnet, die er beschleunigen kann. Ein möglicher Nutzen: Ein Objekt kann auf einer Website bewegt werden, ohne dass die ganze Seite neu gerendert werden muss.