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.
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.